• 情報処理Ⅱ 授業概要

    授業の目的

    授業で学ぶ技術

    Processingを用いて以下のプログラム技術の基礎を学ぶ

    また,論理的に画像・映像を設計する手続き的な造形表現を学ぶ.

    授業の進め方

    教材について

    授業時間外に発生する作業について

    課題について

    授業時間外の質問について

    必要機材

    授業用のデータを持ち運ぶストレージを用意してください.

    評価について

    出席数と提出された課題を元に,総合的に判断.

    第1回:Processing入門

    Processing導入

    Processingの特徴

    アプリケーションの実行

    演習室ではデスクトップにProcessingアイコンがあるのでそれを実行する.

    processing_icon

    エディタ

    ここにプログラムを描く.

    editer

    プログラムの実行と停止

    run_stop_button

    最初のサンプルプログラム

    サンプルプログラム

    灰色の背景に緑の円と青の正方形を描画するプログラム

    first_sample

    このプログラムの実行結果

    first_sample_result

    演習1:プログラムをコピーして実行する.

    Processingのエディタウィンドウへサンプルプログラムをコピー&ペーストして実行してみる.

    以下のプログラムをコピーするとよい.

    Code

    プログラムとは

    サンプルプログラムを元にプログラムの基本を解説する.

    プログラムはテキストデータ

    first_sample_text

    プログラムは複数の「Statement からできている.

    セミコロン(;)によって1つの文として区切る.

    first_sample_statement

    プログラム実行時,基本的には文が上から下へ,順番に逐次実行されていく.

    first_sample_sequential

    コメント:プログラムに影響を与えないメモ

    first_sample_comment

    文(Statement)の要素

    このプログラムの各文は以下の2種類の要素で成り立っている.

    命令(command)

    first_sample_command

    引数(引数)(parameters)

    first_sample_parameters

    最初のプログラムの命令

    最初のサンプルプログラムを読み解くために必要な基礎知識や命令を紹介する.

    また,命令の項の最後に記載する「例」のプログラムはコピーしてProcessingで実行することができる

    Processingの座標系について

    transform_orijin02

    画面サイズを決める.

    size()

    構文

    size( 水平方向のピクセル数, 垂直方向のピクセル数 )

    説明

    引数

    水平方向と垂直方向の大きさをピクセル単位で記述する.

    水平方向:600, 垂直方向:200 の画面を設定する.

    window_size

    Code

    https://processing.org/reference/size_.html

    背景に色を付ける.

    background()

    構文

    background( R値, G値, B値 )

    説明

    指定した色でスクリーンの全体の塗りつぶし描画を行う.

    引数

    スクリーンを R:225, G:204, B:0 で塗りつぶす.

    first_sample_bgcolor

    Code

    https://processing.org/reference/background_.html

    正方形を描画する

    square()

    構文

    square( 左上角X座標値, 左上角Y座標値, 正方形の一辺の長さ )

    説明

    正方形を描画する.

    引数

    square_corner

    X:120, Y:100の座標に一辺の長さが220の正方形を描画する.

    square_default

    Code

    https://processing.org/reference/square_.html

    正円を描画する

    circle()

    構文

    circle( 中心X座標値, 中心Y座標値, 円の直径 )

    説明

    正円を描画する.

    引数

    circle_params

    X:224, Y:184を中心点とした直径220の円を描画する.

    circle_default

    Code

    https://processing.org/reference/circle_.html

    図形の塗りつぶし色を設定する

    fill()

    構文

    fill( R値, G値, B値 )

    説明

    引数

    RGB値それぞれを0~255の間で決定する.

    fill_1

    Code

    https://processing.org/reference/fill_.html

    アルゴリズム

    各命令の構文や動作を覚えていくとプログラムの実行手順を読み取れるようになっていく. このようなプログラムの実行手順をアルゴリズムという.

    first_sample_algorithm

    プログラミングは,アルゴリズムを考え記述することが重要となる.

    演習2:サンプルプログラムの数値を変更する.

    最初のサンプルプログラムの引数(数値)部分を書き換え,気に入った画像を出力してみる.

    プログラムを実行し,気に入った画像が出力されるまで書き換えを繰り返す.

    作例

    first_sample_arrange

    Code

    演習3:サンプルプログラムの命令文を増やす.

    演習2で作成したプログラムを元に,独自に命令文を追加して気に入った画像を出力する.

    作例

    moonの暗い部分の正円は,中心点がスクリーン外なのでY座標値がマイナスとなっていることに注目.

    first_sample_arrange2

    Code

    プログラムファイルの保存

    作成したプログラムは資産になるので,有用なものはできるだけ保存すること.

    ファイルの保存方法

    save_as

    新規にファイルを作成しない場合は「保存」を行い上書きをする.

    Processingのデータ形式

    ファイル形式(拡張子): .pde

    file_in_folder

    演習4:プログラムを保存する.

    演習3で作成したプログラムを保存する.

    デ情ロゴに使う命令

    デ情ロゴ作成に挑戦する.

    dinfo_logo_sample

    楕円を描画する.

    ellipse()

    構文

    ellipse( 中心X座標, 中心Y座標, 楕円の横幅, 楕円の高さ )

    ellipse_center

    説明

    楕円を描画する.

    引数

    ellipse_default

    Code

    https://processing.org/reference/ellipse_.html

    図形の塗りつぶしを半透明にする.

    fill()

    構文

    fill( R値, G値, B値, Alpha値 )

    説明

    RGB後に不透明(アルファ)値を追加することで,塗色を半透明にできる.

    引数

    Alpha値もそれぞれを0~255の間で決定する.

    0: 完全透明 ↔ 255 : 不透明

    rect_02

    Code

    図形の塗りつぶしをグレースケールで設定する.

    fill()

    構文

    fill( Gray値 )

    fill( Gray値, Alpha値 )

    説明

    RGB値の代わりにGray値を記述することで,グレースケールの塗色を指定できる. background()でも使える. アルファ値を使うこともできる.

    引数

    Gray値も0~255の間で決定する.

    0: Black ↔ 255 : White

    gray_scale

    Code

    線を消去する.

    noStroke()

    構文

    noStroke()

    説明

    図形のアウトラインの線を描画しないようにする.

    引数

    なし

    noStroke_

    Code

    https://processing.org/reference/noStroke_.html

    演習5:楕円とマスクを使った描画

    楕円を使って黒い三日月状の模様を作る.

    作例

    gray_moon

    Code

    演習6:デ情ロゴを作る.

    下絵を読み込む

    1. 以下のプログラムを作り,ファイルを保存する.

      Code
    2. JPGファイル「dinfo_logo.jpg」をTeamsの「ホームページ」からダウンロードする.

    3. ダウンロードしたJPGファイル「dinfo_logo.jpg」をpdeファイルのあるフォルダにコピーする.

      dinfo_logo_folder

    4. プログラムを実行し,背景にJPGファイルが表示されることを確認する.

      dinfo_logo_jgp

    大きな楕円部分を作る.

    dinfo_logo_daen

    Code

    小さな楕円マスク部分を作る.

    dinfo_logo_daen_mask

    Code

    残りの部分を自分で作ってみる.

    下の方に作例プログラムを乗せるが,自分なりに作ってみる.

    仕上げ

    全体ができたら最後に以下の仕上げを行う.

    下絵を非表示にする.

    読み込み部分3行をコメントアウトする.

    dinfo_logo_bg_off

    Code

    アウトラインの線を非表示にする.

    noStroke()を追加する.

    dinfo_logo_noStroke

    Code

    塗り・マスク色を整える.

    作例

    dinfo_logo_sample

    Code

     

    第2回:図形描画

    Processing再入門

    自分のPCにおけるProcessingの起動

    以下のリンクよりProcessingをダウンロードする.

    http://processing.org/

    Mac

    「アプリケーション」から実行

    exe_mac

    Windows

    exe_windows

    フォント(エディタ・コンソール)の変更(任意)

    font_change_02

    プログラムを書く際に忘れがちなこと

    コメント

    スラッシュ/を2つ使ったもの.

    Code

    スラッシュとアスタリスク*を組み合わせたもの.

    Code

    用途

    例1

    命令のメモとして用いる.

    divide_window

    Code

    例2

    プログラムの一部を無効にする.

    分かりやすく一時的にグリッドを引き,提出版では非表示にする,という使い方ができる.

    divide_window_noline

    Code

    補足

    課題提出においてコメントは重要です.

    https://processing.org/reference/comment.html

    コーディングに便利なキーボードの使い方(Win)

    文字消去

    カーソル移動

    選択

    連続した線による表現

    draw_line_practice02

    線を描画する

    line()

    構文

    line( 始点X座標値, 始点Y座標値, 終点X座標値, 終点Y座標値 )

    説明

    2点間に1本の線を描画する.

    引数

    始点と終点のX,Y座標値を記述する.

    例1

    始点X,Y座標値:(30, 20)から終点X,Y座標値: ( 85, 75)に線を描画する.

    line_0

    Code

    例2

    line_three

    Code

    https://processing.org/reference/line_.html

    線の太さを設定する

    strokeWeight()

    構文

    strokeWeight( 太さピクセル数 )

    説明

    線の太さをピクセル単位で設定する.

    引数

    太さのピクセル数を記述する.

    strokeWeight_

    Code

    https://processing.org/reference/strokeWeight_.html

    線の端の形状を変更する.

    strokeCap()

    構文

    strokeCap( ROUND or SQUARE or PROJECT )

    例1

    線の端の形状を丸くする.

    draw_stroke_cap_round

    Code

    例2

    終端を四角形にする.

    draw_stroke_cap_square

    Code

    例3

    終端を突き出し形状にする.

    draw_stroke_cap_project

    Code

    https://processing.org/reference/strokeCap_.html

    塗りつぶしを消去する

    noFill()

    構文

    noFill()

    説明

    塗りつぶしを無効にする.

    noFill_

    Code

    https://processing.org/reference/noFill_.html

    演習1

    1. line()を複数使用し,画面左端から始まり右端で終わる連続した線を自由に描画する.

      条件

      • スクリーンサイズ: 400, 400

      • 線の数や長さは自由

      draw_line_practice01

    2. 各線の太さや終端の形状を変化させ,より動きのある画面を作ってみる.

    draw_line_practice02

    1. 作成したプログラムは後の演習で再利用するので,分かりやすい場所に保存しておく.

    2. 作例のプログラム

    Code

    色の書式HSBによる表現

    lines_hsb

    線の色を変える

    stroke()

    構文

    stroke( R値, G値, B値 )

    説明

    引数

    RGB値それぞれを0~255の間で決定する.

    例1

    色を指定して線を描画する.

    stroke_line

    Code

    例2

    色を指定して図形の(枠)線を描画する.

    stroke_square

    Code

    例3

    line_three_color

    Code

    https://processing.org/reference/stroke_.html

    カラーモード

    colorMode()

    色の書式を変える.

    構文

    いずれかを用いる.

    RGBモードを指定

    colorMode( RGB, 最大値 )

    RGBモードを指定(各チャンネルの最大値を指定)

    colorMode( RGB, Rの最大値, Gの最大値, Bの最大値 )

    RGBモードを指定(各チャンネルとアルファの最大値を指定)

    colorMode( RGB, Rの最大値, Gの最大値, Bの最大値, アルファの最大値 )

    HSBモードを指定

    colorMode( HSB, 最大値 )

    HSBモードを指定(各チャンネルの最大値を指定)

    colorMode( HSB, 色相の最大値, 彩度の最大値, 輝度の最大値 )

    HSBモードを指定(各チャンネルとアルファの最大値を指定)

    colorMode( HSB, 色相の最大値, 彩度の最大値, 輝度の最大値, アルファの最大値 )

    説明

    引数

    例1

    RGBモード最大値1.0で指定した例

    colormode_rgb

    Code

    例2

    HSBモードで指定した例

    colormode_hsb

    Code

    例3

    HSBモードでアルファを指定した例

    colormode_hsb_alpha

    Code

    https://processing.org/reference/colorMode_.html

    演習2

    前回の演習で作成したプログラムに色を付け,線に色相のグラデーションをつける.

    lines_hsb

    作例のプログラム

    Code

    ブレンドモードによる表現

    sippou

    ブレンドモードを設定する.

    blendMode()

    構文

    blendMode( モード )

    説明

    図形描画時に,下に描かれた内容に対する効果を変更する.

    引数

    以下のモードからいずれかを記述する.

    Photoshop等の描画モードと大まかに対応している.

    例1:加算

    図形を重ねるほど白に近づく. 白の上に重ねると何も変化が起きない.

    blendmode_add

    Code

    例2:減算

    図形を重ねるほど黒に近づく. 白の上に重ねると色が補色になるので使いづらい.

    blendmode_subtract

    Code

    例3:比較(暗)

    図形を重ねるとRGB各値の小さい値が選ばれる. 黒の上に重ねると何も変化が起きない.

    blendmode_darkest

    Code

    例4:比較(明)

    図形を重ねるとRGB各値の大きい値が選ばれる. 白の上に重ねると何も変化が起きない.

    blendmode_lightest

    Code

    例5:差の絶対値

    図形を重ねると,下の色とのRGB各値の差が選ばれる. 同色の図形を重ね合わせ,重なった部分を抜く表現に有用.

    blendmode_difference

    Code

    例6:除外

    差分と同じだが,RGBの差をマイルドにしたもの. 重なった部分が完全には抜かれない.

    blendmode_exclusion

    Code

    例7:乗算

    図形を重ねるほど黒に近づく. 減算と近いが,白の上に重ねても色が補色にならないのでこちらが使いやすい.

    blendmode_multiply

    Code

    例8:スクリーン

    図形を重ねるほど白に近づく. 加算と近いが,若干結果が異なるので好みで使い分ける.

    blendmode_screen

    Code

    演習3

    七宝(しっぽう)模様を作る.

    sippou

    条件

    1. 9つの正円を描画する.

      sippou_6circles

    2. ステップ1の上に16個の正円を描画する.

      sippou_16circles

    3. ブレンドモード(差の絶対値)命令文を記述する.

      sippou_blendmode

    4. 以下の色指定を記述する.

      • background( 255, 0, 0 );

      • fill( 0, 255, 255 );

      sippou

    5. 以下,完成プログラム

      Code

    円弧による表現

    ougi

    度(度数法)をラジアン(弧度法)に変換する.

    radians()

    構文

    radians( 角度 )

    説明

    例1

    45°をラジアンへ変換した値をコンソールに表示する.

    Code

    radians_45

    例2

    180°をラジアンへ変換した値をコンソールに表示する.

    Code

    radians_180

    詳しい使用例は次の「円弧の描画」で紹介する.

    https://processing.org/reference/radians_.html

    円弧を描画する

    arc()

    構文

    arc( 中心のX座標, 中心のY座標, 横の直径, 縦の直径, 弧の始まりのラジアン, 弧の終わりのラジアン, モード )

    角度をラジアンへ変換する命令を含めると以下のようになる.

    arc( 中心のX座標, 中心のY座標, 横の直径, 縦の直径, radians( 弧の始まりの角度 ), radians( 弧の終わりの角度 ), モード );

    arc_zukai

    説明

    引数

    例1

    45°から始まり,270°で終わるオープンな弧

    arc_open

    Code

    例2

    45°から始まり,270°で終わる閉じた弧

    arc_chord

    Code

    例3

    45°から始まり,270°で終わるパイ状の弧

    arc_pie

    Code

    例4

    円弧を用いた沈む夕日のような表現

    arc_moon

    Code

    https://processing.org/reference/arc_.html

    演習4

    扇柄を作る.

    ougi

    条件

    1. 一番大きな弧をPIE指定で描画する.

      ougi_Larc

    2. 大きさを変えた弧を3つ描画する.

      ougi_arcs

    3. 線の太さや色を好みで設定する.

      ougi

    4. 余裕があれば下部分を削る表現に挑戦する.

      ougi_ad

    5. 以下,完成プログラム

      Code

    座標変換による表現

    5petals_flower

    座標系( Coordinate system )

    Processing の座標系

    Processing のようなスクリーン(二次平面)上で図形の操作を行うアプリケーションにおいては,2次元の座標系が導入されている.

    Code

    transform_origin

     

    座標変換とは

    この座標系(X軸,Y軸,原点)を並行移動,回転,拡大縮小することを座標変換という. 図形が変換されるのではないことに注意

    平行移動

    window_transform_translation_


    回転

    window_transform_rotate_


    拡大縮小

    window_transform_scale_

    座標変換を実行した後に図形描画を行うことにより,ウィンドウ上では図形が平行移動,回転または拡大縮小したように描画される.

    平行移動

    translate()

    構文

    translate( X移動量, Y移動量 )

    説明

    平行移動を行わず描画を行った場合

    transform_origin02_draw

    平行移動を行った後に描画を行った場合

    transform_translate

     

    transform_translate_draw

    引数

    移動させるX,Y値を記述する.

    シンプルな家の模様を複数描画する. 同じ構造の図形を繰り返し描画する際,よりシンプルにできる.

    house_02

    Code

    https://processing.org/reference/translate_.html

    回転

    rotate()

    構文

    rotate( ラジアン )

    角度(°)を使いたい場合はこう書くとよい.

    rotate( radians( 角度 ) )

    説明

    座標を原点を中心に時計回りに回転させる.

    座標系の回転のイメージ

    transform_rotation

     

    描画

    transform_rotation_draw

    引数

    回転するラジアンを記述する. マイナス「-」の値を指定すると反時計回りに回転する.

    例1

    原点を中心に15°回転させ,矩形描画を行う.

    transform_rotate_simple_rect

    Code

    例2

    スクリーン中央を中心に回転させたい場合

    transform_rotate_center_simple_rect

    1. スクリーン中心へ平行移動を行う.

    transform_translate_center

    1. 座標を回転させる.

    transform_translate_center_rotate

    1. 図形の描画を行う. 手順2に戻る.

    transform_translate_center_rotate_draw

    Code

    例3

    時計の針のような描画

    Code

    https://processing.org/reference/rotate_.html

    拡大縮小

    scale()

    構文

    scale( 拡大率 ) scale( X拡大率, Y拡大率 )

    説明

    拡大縮小を行わず描画を行った場合

    transform_origin02_draw

    拡大縮小を行った後に描画を行った場合

    図形の大きさだけでなく,2つの図形の間隔も大きくなる.

    transform_scale_gainen02

    引数

    見た目の大きさはかわっているが,rect()渡している値は同じであることに注目

    transform_scale_simple_rects

    Code

    https://processing.org/reference/scale_.html

    演習5

    シンプルな花の模様を作成する.

    5petals_flower

    条件

    1. 座標系をスクリーン中心へ平行移動し,花弁用の楕円を1つ描画する. 楕円は少しX軸方向(右方向)へずらしておく.(これには平行移動は使わないこと)

      5petals_flower_firstellipse

    2. 座標系を72°回転させて同じ楕円を1つ描画する.

      5petals_flower_secondellipse

    3. ステップ2を繰り返し,計5個の楕円を描画する.

      5petals_flower_5ellipses

    4. 中心に楕円を一つ描画する.

      5petals_flower_base

    5. 回転(-18°)命令文を1つ目の楕円描画直前に挿入する.

      5petals_flower_rot_fix

    6. 線の太さや各種色を設定する.

      5petals_flower

    7. 以下,完成プログラム

      Code

    座標変換の組み合わせ

    復習を兼ねて座標変換の組み合わせを解説する.

    平行移動と回転の組み合わせ

    平行移動+回転

    1. 平行移動

    transform_translate

    2. 回転

    transform_translate_rotation

    3. 図形描画

    transform_translate_rotation_draw

    回転+平行移動

    あまり推奨しない

    1. 回転

    transform_rotation

    回転後の平行移動の考え方

    transform_rotation_translate01

     


    2. 平行移動

    transform_rotation_translate02

    多角形による表現

    asanoha_elem

    多角形を描画する

    beginShape()

    構文

    beginShape( 種類 )

    説明

    多角形描画は複数の文を記述する必要がある.

    1. はじめにbeginShape();と記述.

      • 引数として後述の図形の種類を記述する.

    2. 必要な頂点の数だけ vertex( X座標, Y座標 ); を記述する.

    3. 最後に endShape(); を記述し,多角形描画を終了する. ※なお、endShape(CLOSE);と記述することで閉じた形状を描画できる.

    Code

    引数

    図形の種類

    例1

    矢印状の図形 複雑な形状は事前に方眼紙等に下書きをし,下図のような計画を立てるとよい.

    draw_arrow_model

    draw_arrow

    Code

    例2

    トライアングルストリップTRIANGLE_STRIPの例 ストリップ(strip )は「細長い一片」の意味

    beginshape_triangle_strip

    Code

    例3

    トライアングルファンTRIANGLE_FANの例 最初の点を中心に連続した三角形を描画する.

    beginshape_triangle_fan

    Code

    例4

    クアッドストリップQUAD_STRIPの例

    beginshape_quad_strip

    Code

    https://processing.org/reference/beginShape_.html https://processing.org/reference/vertex_.html https://processing.org/reference/endShape_.html

    線のつなぎ目の形状を変更する.

    strokeJoin()

    構文

    strokeJoin( 種類 )

    説明

    引数に応じて線のつなぎ目の形状を変更する.

    引数

    種類

    例1

    MITER(デフォルト)

    strokejoint_mitter

    Code

    例2

    BEVEL

    strokejoint_bevel

    Code

    例3

    ROUND

    strokejoint_round

    Code

    演習6

    麻の葉模様(の一部)を作成する.

    asanoha_elem

    麻の葉模様は三分割された正方形の組み合わせでできている.

    条件

    1. 座標系をスクリーン中心へ平行移動し,トライアングルストリップを1つ描画する. 2つ目の図のように5つの頂点を設定する.

      asanoha_elem_trianglestrip

      asanoha_elem_trianglestrip

    2. 座標系を60°ずつ回転させてトライアングルストリップを6つ描画する.

      asanoha_elem_6trianglestrips

    3. 線の太さや各種色を設定する.

      asanoha_elem_colored

    4. 線のつなぎ目をBEVELにする.

      asanoha_elem

    5. 以下,完成プログラム

    Code

    座標系の保存と復帰

    構文

    座標系を保存する.

    pushMatrix()

    座標系を保存した時点に戻す.

    popMatrix()

    説明

    プログラムの処理の順を追って説明する.

    1. pushMatrix()で座標系を保存しておく.

    2. 座標変換と各種描画の命令

      • translate(), rotate(), scale()

      • 図形描画

    3. popMatrix()で初期の座標系に戻す.

    座標変換を行った後に白の矩形を描画し, 座標系を初期に戻した後に黒の矩形を描画する.

    transform_pushpopMatrix_simple

    Code

    座標系保存のメカニズム

    pushMatrix()popMatrix()は,座標系データをStack形式で出し入れしている.

    Stack(スタック)とは

    したがって,pushMatrix()とpopMatrix()を入れ子構造で使用すると,新しく保存した座標系から古いものへ, という順に取り出される.

    transform_stack

    具体的なプログラム記述

    Queueの仕組みがわかると理解しやすい.

    transform_matrix_nest

    角度と位置を変化させながら楕円を4つ描画する.

    pushpopMatrix_example01

    Code

    https://processing.org/reference/pushMatrix_.html https://processing.org/reference/popMatrix_.html

    演習7

    演習6の麻の葉模様を横に一つ追加し,繋げる.

    asanoha_elem2

    1. 演習6の完成プログラムを開く.

    2. プログラムの最後に平行移動命令文translate( 200, 0 );を記述する.

    3. ステップ2の後ろに,模様描画部分をコピー&ペーストする. しかし,うまく描画されないことを確認する.

      asanoha_elem2_sippai

    4. pushMatrix()popMatrix()を適切な場所に記述する.

      asanoha_elem2_pushpop

    5. ステップ2で記述した部分をtranslate( 200, 0 );200の値を調整し,模様同士を隣接させる.

      asanoha_elem2

    6. 以下,完成プログラム

    Code

    曲線による表現

    曲線を描画する

    curve()

    構文

    curve( 制御点1のX値, 制御点1のY値, 描画点1のX値, 描画点1のY値, 描画点2のX値, 描画点2のY値, 制御点2のX値, 制御点2のY値 )

    curve_spline_clipped

    説明

    4点を結ぶ曲線の中間2点間が描画される.(スプライン曲線)

    引数

    4点とを曲線で囲まれた領域(上の図のプログラム)

    Code

    https://processing.org/reference/curve_.html

    ベジェ曲線を描画する

    bezier()

    構文

    curve()の場合と描画点,制御点の記述順が異なることに注意.

    bezier( 描画点1のX値, 描画点1のY値, 制御点1のX座標, 制御点1のY座標, 制御点2のX値, 制御点2のY値, 描画点2のX座標, 描画点2のY座標)

    bezier_clipped

    説明

    描画点(アンカーポイント)2点と制御点(スムーズポイント)2点から描画される曲線.

    引数

    ハンドルと曲線(上の図のプログラム)

    Code

    https://processing.org/reference/bezier_.html

    演習8

    ベジェ曲線を使って波を作る.

    bezier_wave

    条件

    1. 左半分の曲線を描画する.

      制御点①と②は,波のピークに対して対称の位置にあるのが望ましい. ※制御点やハンドルは描画する必要無し.

      bezier_wave_half_l

    2. 右半分の曲線を描画する. ※制御点やハンドルは描画する必要無し.

      bezier_wave_half_r

    3. 制御点の位置を動かし,波の形を調整する.

    4. 線の太さや色を調整する.

    5. 以下,完成プログラム

    Code

    その他の図形描画命令

    演習は行わないが,今後必要になったら参照すること.

    点を描画する

    point()

    構文

    point( X座標値, Y座標値 )

    説明

    引数

    点を描画する座標のX値, Y値.

    point_4points

    Code

    https://processing.org/reference/point_.html

    矩形を描画する.

    rect()

    構文

    rect( 左上X座標, 左上Y座標, 矩形の幅, 矩形の高さ )

    説明

    矩形(長方形)を描画する.

    引数

    rect_corner

    rect_default

    Code

    矩形の描画方法を指定する.

    rectMode()

    構文

    rectMode( モード )

    説明

    引数

    モード

    例1

    CORNERS

    構文

    rect( 左上X座標, 左上Y座標, 右下X座標, 右下Y座標 )

    rect_corners

    rect_mode_common

    Code

    例2

    CENTER

    構文

    rect( 中心X座標, 中心Y座標, 矩形の幅, 矩形の高さ )

    rect_center

    rect_mode_common

    Code

    例3

    RADIUS

    構文

    rect( 中心X座標, 中心Y座標, 矩形の幅の半分, 矩形の高さの半分 )

    rect_radius

    rect_mode_common

    Code

    https://processing.org/reference/rectMode_.html

    楕円の描画方法を指定する.

    ellipseMode()

    構文

    ellipseMode( モード )

    説明

    引数

    モード

    例1

    RADIUS

    構文

    ellipse( 中心X座標, 中心Y座標, 楕円の幅の半分, 楕円の高さの半分 )

    ellipsemode_radius

    ellipse_mode_common

    Code

    例2

    CORNER

    構文

    ellipse( 左上X座標, 左上Y座標, 楕円の幅, 楕円の高さ )

    ellipse_corner

    ellipse_mode_common

    Code

    例3

    CORNERS

    構文

    rect( 左上X座標, 左上Y座標, 右下X座標, 右下Y座標 )

    ellipse_corners

    ellipse_mode_common

    Code

    https://processing.org/reference/ellipseMode_.html

    三角形を描画する.

    triangle()

    構文

    triangle( 頂点1X座標, 頂点1Y座標, 頂点2X座標, 頂点2Y座標, 頂点3X座標, 頂点3Y座標 )

    説明

    三角形を描画する.

    引数

    描画する三角形の3つの頂点の座標

    shape_triangle

    Code

    https://processing.org/reference/triangle_.html

    四角形を描画する.

    quad()

    構文

    quad( 頂点1X座標, 頂点1Y座標, 頂点2X座標, 頂点2Y座標, 頂点3X座標, 頂点3Y座標, 頂点4X座標, 頂点43Y座標 )

    説明

    四角形を描画する. 矩形と違い,線と線の間の角度が90°に固定されていない.

    引数

    描画する四角形の4つの頂点の座標

    quad_example

    Code

    演習EX

    本日まで学んだ命令を自由に使い,自由に画像を生成してみる.

    第3回:演算と変数

    引数に式を書く.

    params_suushiki

    Code

    引数は式を書くこともできる.

    式がコンピュータにより計算され,答の値が引数になる.

    式とは

    算術式とは

    演算子

    プログラムの式に用いる演算を行うための記号を演算子という.

    算術演算子

    算数(演算記号)プログラム(演算子)記号の読み方日本語キーボードにおけるキーの場所の対応
    ++プラスShift + 「れ」
    -ハイフン「ほ」
    ×*アスタリスクShift + 「け」
    ÷/スラッシュ「め」

    式と演算子

    式と演算子の関係をイメージで理解しておく.

    math_operater

    演習1

    引数に数式を記述し,4つの円を上下左右に表示する.

    1. 以下のプログラムをコピーする.

      params_suushiki_circle

      Code
    2. 以下の円の描画命令を追加する.

      circle( 100 + 50, 100, 40 );

      params_suushiki_circle2

    3. ステップ2のように,最初の円の座標値100に加算/減算する数式を記述し,円の描画命令を追加していく. 以下のような表示が行われれば完成.

      params_suushiki_circle5

    4. 以下完成プログラム

      Code

    このような式への置き換えは意味がない気がするが,変数を用いる場合に有効になる.

    変数を使う.

    演習1のプログラムを変数で置き換えたプログラム.

    params_suushiki_circle5

    Code

    変数の値を変えることで,簡単に図形の描画を変化させることができる.

    params_suushiki_circle5_zure

    Code

    変数とは

    変数を定義する.

    変数を作ることを変数を定義するという.

    構文

    int 変数名 = 数値;

    float 変数名 = 数値;

    説明

    int_koubun

    int
    float

    変数を使う.

    例1

    int型の変数を作る例. 図形のXY座標値を変数に保存している.

    var_circle

    Code

    例2

    例1を元に,float型の変数を作る例. HSBで用いる色情報を変数に保存している.

    var_circle_col

    Code

    例3

    演習1のプログラムに変数を加えたもの.

    params_suushiki_circle5_zure

     

    Code

    例4

    例3にfloat型の変数を追加し,変数を使って色の指定を行う例. 彩度と輝度は共通にするため,変数を用いている.

    var_int_float_circle5

    Code

    演習2

    例4のプログラムに円の大きさ用の変数を一つ追加し,命令文の数値を変数に置き換える.

    1. 例2のプログラムをコピーする.

    2. 円の大きさ用のint型の変数を1つ作成する.

    3. 描画命令の引数部分を変数に置き換える.

    4. 追加した変数の初期値を変更すると全ての円の大きさが変わることを確認する.

      var_int_float_circle5_size

    5. 以下,完成プログラム

      Code

    変数の値を操作する.

    変数の値は後から変更することができる.

    var_add_squares

    Code

    変数に値を足す(加算)

    構文

    変数名 += 値;

    説明

    https://processing.org/reference/addassign.html

    例1

    X座標値の変数に値を足しながら正方形を横に並べる.

    var_add_squares

    Code

    変数から値を引く(減算)

    構文

    変数名 -= 値;

    説明

    https://processing.org/reference/subtractassign.html

    変数に値をかける(乗算)

    構文

    変数名 *= 値;

    説明

    https://processing.org/reference/multiplyassign.html

    例2

    例1のプログラムに,正方形の大きさの値の変数に0.9をかける記述を追加した例.

    var_mult_squares

    Code

    変数を値でわる(除算)

    構文

    変数名 /= 値;

    説明

    https://processing.org/reference/divideassign.html

    変数へ値を上書きする.

    構文

    変数名 = 値;

    説明

    代入演算子

    四則計算演算代入演算子
    足し算加算+=
    引き算減算-=
    かけ算乗算*=
    割り算除算/=

    エディタ:検索と置換

    プログラムの同じ個所を同時に書き換えたい場合,文字列の置換を行うとよい.

    1. エディタ内の書き換えたい文字列を選択する.

    2. Ctrl キーを押しながら Fキー を押す.

    3. 「置換」欄に書き換えたい(新しい)文字列を入力する.

    4. 「すべて置換」をクリックする.

    mojiretsu_chikan

    演習3

    例2のプログラムに代入演算子を使った文を複数追加し,下図のような表示が行われるプログラムを作る.

    var_squares_addy

    1. 例2のプログラムをコピーする.

    2. スクリーンサイズを400×200へ変更する.

    3. いずれかの変数と代入演算子を使った文を複数追加し,上図のように表示されるプログラムを作成する.

    4. 以下,完成プログラム.

      Code

    剰余算を使った表現

    ストライプやボーダーなどの縞模様の表現に用いることが多い

    var_squares_jouyo

    Code

    剰余算

    演算子

    算数(演算記号)プログラム(演算子)記号の読み方日本語キーボードにおけるキーの場所の対応
    ÷%パーセントShift +「え」

    例1

    正方形の座標値Xの値を200で割った余りを塗色に設定した例

    var_squares_jouyo

     

    Code

    例2

    環状に並んだ円の角度を180で割った余りを塗色に設定した例

    var_circles_jouyo

    Code

    演習4

    例1のプログラムの変数iRepeatの初期値を書き換え,様々な模様のパターンを表示する. 余裕があればfill()を書き換え,RGB値を指定してみる.

    var_squares_jouyo_01

    var_squares_jouyo_02

    var_squares_jouyo_03

    複雑な計算式

    四則混合

    (1+2)3×4÷5

    算術演算子の優先順位

    優先度種類演算子
    高い括弧(カッコ)( )
     乗算*
     除算/
     剰余算%
     加算+
    減算-

    演習5

    白黒ストライプを作る.

    var_squares_shirokuro

    1. 以下のプログラムをコピーする.

      var_squares_shirrogray

      Code
    2. fill( iX % iRepeat )の中の引数を書き換え,白黒ストライプが描画されるようにする.

      カッコや他の算術演算子を加え,四則混合の式にする必要がある.

      var_squares_shirokuro

    3. 以下,完成プログラム

      Code

    三角関数を用いた表現

    三角関数

    sin()

    cos()

    tan()

    構文

    sin( 角度のラジアン値 ) cos( 角度のラジアン値 ) tan( 角度のラジアン値 )

    角度をラジアンへ変換する命令を含めると以下のようになる

    sin( radians( 角度のラジアン値 ) ) cos( radians( 角度のラジアン値 ) tan( radians( 角度のラジアン値 )

    説明

    角度と計算結果の値の関係

    関数名構文返す値の範囲角度と返す値の関係
    正弦関数sin( α )-1~1の間calv_var_sin_graph
    余弦関数cos( α )-1~1の間calv_var_cos_graph
    正接関数tan( α )-∞~-∞ 90°等,値が定義できない場合がある.calv_var_tan_graph

    https://processing.org/reference/sin_.html https://processing.org/reference/cos_.html https://processing.org/reference/tan_.html

    例1

    並んだ正方形のY座標値にsin()を使った例

    var_squares_sin

    Code

    例2

    並んだ正方形の塗色にcos()を使った例

    var_squares_col_cos

    Code

    演習6

    例1を元に,塗色に三角関数に使い白黒のグラデーションをつける.

    var_squares_sin_fill_gyaku

    1. 以下のプログラムをコピーする.

      var_squares_sin

      Code
    2. iYiCenterYで置換する.

      var_squares_sin_chikan_cent

    3. 新しくY座標値用変数を作る.

      float fY = 0;

    4. 正方形描画命令の2つ目の引数を切り取り,変数fYに代入する.

      fY = iCenterY * sin( radians( iX ) ) + iOffsetY;

      この代入文は正方形描画命令の前の行に記述する.

    5. ステップ4で切り取った部分には変数fYを記述する.

      以下,ここまででできたプログラム

      Code
    6. 他の正方形描画命令の2つ目の引数をfYで置換する.

      「次を探す」・「置換&検索」を使って1つずつ置換する.

      var_squares_sin_chikan_fy

    7. ステップ4の文を他の正方形描画命令の前行にも記述する.

      以下,ここまででできたプログラム

      Code
    8. ステップ7までで,引数の中に記述していた式の値を変数fYに保存するように変更を行った.

    9. 全ての正方形描画命令の前にfill( fY );を追加してみる.

      var_squares_sin_fill

    10. fill( fY );の引数が大きくなるよう式を組む.

      変数fYは0~50の間の値なので,このままだと暗い.

      var_squares_sin_fill_5bai

    11. スクリーン上のほうが正方形が白くなる方法を考えてみる.

      var_squares_sin_fill_gyaku

    12. 以下,完成プログラム

      Code

    乱数を用いた表現

    乱数を得る

    random()

    構文

    random( 最大値 )

    random( 最小値, 最大値 )

    説明

    引数

    返り値

    ランダムなfloat

    https://processing.org/reference/random_.html

    例1

    正方形の並びのY座標値をランダムな値にする.

    var_squares_randomy

    Code

    例2

    並んだ正方形の塗色をランダムなグレー値にする.

    var_squares_randomcol

    Code

    演習7

    色のブレがあるストライプ柄を作る.

    var_squares_randomcol_bure

    条件

    べき乗の計算を行う命令

    pow()

    構文

    pow( 基数, 指数 )

    説明

    35=3×3×3×3×3

    引数

    基数,指数

    返り値

    べき乗の計算結果のfloat型の値

    例1

    正方形のY座標値をべき乗の計算で大きくしていく例 変数iXを指数としている.

    var_squares_pow_y

    Code

    例2

    正方形の塗色をべき乗の計算で明るくしていく例 変数iXを指数としている.

    var_squares_pow_col

    Code

    https://processing.org/reference/pow_.html

    演習8

    1. 例2のプログラムをコピーする

    2. 基数を値として保存する変数fNの初期値を増やして実行してみる.

    3. 正方形の色が急激に明るくなることを確認する.

      var_squares_pow_col_zouka

    その他の数学関連の命令

    平方根の計算を行う命令

    sqrt()

    構文

    sqrt( 平方根を求める数値 )

    説明

    sqrt_graph

    引数

    平方根を求める数値

    例1

    正方形のY座標値にsqrt()を使用した例

    var_squares_sqrt_y

    Code

    https://processing.org/reference/sqrt_.html

    例2

    正方形の塗色にsqrt()を使用した例

    var_squares_sqrt_col

    Code

    絶対値を求める

    abs()

    構文

    abs( 絶対値を求める数値 )

    説明

    引数

    絶対値を求める数値

    Code

    https://processing.org/reference/abs_.html https://processing.org/reference/ceil_.html https://processing.org/reference/floor_.html https://processing.org/reference/round_.html

    型の変換

    小数点以下を切り上げる.

    ceil()

    構文

    ceil( 数値 )

    例1

    Code

    例2

    float型の値をint型の値に変換するために用いることができる.

    Code

    小数点以下を切り捨てる.

    floor()

    構文

    floor( 数値 )

    例1

    Code

    例2

    float型の値をint型の値に変換するために用いることができる.

    Code

    小数点以下を四捨五入する.

    round()

    構文

    round( 数値 )

    例1

    Code

    float型の値をint型の値に変換するために用いることができる.

    例2

    Code

    int()

    整数型に変換する. 小数点以下は切り捨てられる.

    構文

    int( 変換するfloat型変数や値 )

    Code

    float()

    実数型に変換する.

    構文

    float( 変換するint型変数や値 )

    変換しなかった場合,計算結果の小数点以下が切り捨てられてしまう.

    Code

    変数でなく,数値の場合以下のような書き方もできる

    Code
    Code

    システム変数

    画面のサイズを取得する

    横のピクセル数

    width

    縦のピクセル数

    height

    説明

    transform_origin01

    例1

    スクリーンの角から対角までの線を描画する.

    window_size

    Code

    例2

    size_rect

    Code

    https://processing.org/reference/width.html https://processing.org/reference/height.html

    定数

    final

    構文

    final 変数型 定数名 = 初期値;

    説明

    矩形の大きさの引数に用いた例. 変数と区別しやすくするため,定数名を大文字のみで記述するなど工夫をすることを推奨.

    Code

    https://processing.org/reference/final.html

    第4回:制御文:繰り返し

    for文の基本1

    最初のサンプル

    スクリーン右端まで正方形を並べて描画する.

    var_add_squares

    前回までのプログラム

    Code

    for文を使ったプログラム

    Code

    for文とは

    for_koubun

    条件式とは

    condition_exp

    比較演算子

    構文

    条件式比較演算子真(true)を返す条件
    a < b<aがbより小さい
    a <= b<=aがb以下
    a > b>aがbより大きい
    a >= b>=aがbと等しいか大きい
    a == b==aとbが等しい
    a != b!=aがbが等しくない

    for文の繰り返し実行順序

    for_flow_true

    for文の変数を文に記述する.

    繰り返しを図形にも反映させるため,for文の変数は繰り返す文の中にも記述する.

    for_variable_incommand

    https://processing.org/reference/for.html

    例1

    スクリーン右端まで幅50の矩形を並べて描画する.

    参考:矩形を描画する.

    for_rects8

    Code

    例2

    スクリーン右端まで幅20の矩形を並べて描画する.

    for_rects20

    Code

    例3

    スクリーン下端まで矩形を並べて描画する. 変数名をiYに変更している.

    for_rects8_column

    Code

    例4

    ストライプ状に縦線を描画する.

    for_lines

    Code

    演習1

    「大きさ40の正方形を右端まで並べるプログラム」をfor文を使ったプログラムに書き換える.

    for_squares10

    1. 下のプログラムをコピーする.

      for文を使わないプログラム

      Code
    2. プログラムをfor文を使ったものに書き換える.

      最終的には,元プログラム3行目のint iX = 0;は削除しなければエラーになる.

    3. 以下,完成プログラム

      Code

    for文の基本2

    二重(定義)エラー

    for文の変数と同じ名前の変数を前に記述するとエラーとなる.

    duplicate_variable_error

    ブロック

    ブロック構造

    for_block_indent

    自動フォーマット機能

    Processingにはボタンを1度押すだけでプログラムを自動で整形する機能がある.

    編集 > 自動フォーマット ショートカットキー:Ctrl + T

    auto_format

    auto_format_code

    大きい円→小さい円と描画するため, for文の変数の値を400→10へ20ずつ減らしていく例

    for_circles_rev

    Code

    演習2

    「剰余算を使った白黒ストライプのプログラム」をfor文を使ったプログラムに書き換える.

    var_squares_shirokuro

    1. 下のプログラムをコピーする.

      for文を使わないプログラム

      Code
    2. プログラムをfor文を使ったものに書き換える.

      最終的には,元プログラム3行目のint iX = 0;は削除しなければエラーになる.

    3. 以下,完成プログラム

      Code

    決められた回数繰り返すfor文による表現

    繰り返す回数を指定するfor文

    これまでの正方形を並べるfor文は,「8回繰り返す」というfor文に書き変えることもできる.

    下のプログラムのようになる.

    var_add_squares

     

    Code

    繰り返す回数

    条件式の右辺に記述する.

    for_no_kaisuu

    更新で1ずつ増やす.

    for_no_1add

    インクリメント演算子

    ++

    構文

    前置

    ++変数

    後置

    変数++

    説明

    https://processing.org/reference/increment.html

    デクリメント演算子

    --

    構文

    前置

    --変数

    後置

    変数--

    説明

    https://processing.org/reference/decrement.html

    例1

    20個の円をランダムな位置に描画する.

    for_no_random_circles

    Code

    例2

    200個のランダムな正方形を減算で描画する.

    for_squares_sub

    Code

    例3

    20本のランダムな線を除外で描画する.

    for_lines_exc

    Code

    演習3

    任意のブレンドモードを指定し,100個以上の任意の図形をランダムに描画するプログラムを自由に作成する.

    参考:ブレンドモードによる表現

    下のサンプルをベースに進めてもよい.

    サンプル

    ブレンドモード:ブレンド(デフォルト)で100個の正円を描画する.

    for_no_100circles_plain

    Code

    作例

    ブレンドモード:差の絶対値で100個のランダムな正円を描画する.

    for_no_100circles_blend

    Code

    for文と座標変換を使った表現

    特にpushMatrix()popMatrix()を使う場合は慣れが必要となる.

    例1

    座標変換を使用して正方形を8つ並べる.

    var_add_squares

    Code

    例2

    円周上に正方形を12個並べる.

    参考:矩形の描画方法を指定する.

    for_squares_enshuu

    Code

    例3

    回転させた正方形を水平に並べる.

    座標系の保存を使用する必要があるため難易度が上がる.

    for_squares_rot

    Code

    例4

    5枚の花弁をもつ花の模様

    5petals_flower

    Code

    例5

    256個の正円を使った螺旋状の表現

    for_rasen

    Code

    演習4

    下のサンプルを元に,回転対称の表現を自由に記述する.

    長方形を60°ずつ回転させながら描画した回転対称の表現

    for_rects_rot

    Code

    以下作例

    for_rects_rot_diff

    Code

    変数を多用した多角形の表現

    乱数の値を保存する変数を使った連続した線の描画

    for_var_lines

    Code

    for文のブロック外で定義した変数.

    変数が使える範囲を変数のスコープという.

    var_scope

    for文の初期化で定義した変数.

    for_countvar_scope

    for文のブロック内で定義した変数.

    for_var_scope

    例1

    五角形を描画する.

    多角形描画vertex()は座標変換を使えないため,sin()cos()を用いて頂点の計算を行う. 数学的に理解する必要は無いのでテンプレートとして使えればよい.

    for_var_5quad

    Code

    例2

    六角形を描画する.

    例1の数値を一部変更するだけでできる.

    for_var_6quad

    Code

    例3

    凹凸のある多角形の描画

    for_var_uni

    Code

    演習5

    例3のプログラムを元に,下図のような星型の描画のプログラムを作る.

    一部の数値を変更するだけでできる.

    for_var_star

    以下,完成プログラム

    Code

    for文のネストを使った表現

    正方形をスクリーン全体に並べて描画する.

    for_nest_grid

    Code

    for文のネスト入れ子構造

    for文の中にさらにfor文を記述することを,for文のネストという.

    for文のネストの実行順序

    for_nest_grid

    for文の変数を文に記述する.

    ネストの分変数が増えるので,繰り返す文の中に2つの変数を記述できる.

    for_nest_variables

    例1

    大きさ40の正方形をスクリーン全体に並べて描画する.

    for_nest_squares

    Code

    例2

    例1を元に変数iXの値を彩度,変数iYの値を輝度に使用した例.

    for_nest_squares_hsb

    Code

    例3

    例2を元に点(ドット)を描画する例.

    for_nest_points_hsb

    Code

    例4

    正方形と正円を重ねて並べて描画する.

    参考:楕円の描画方法を指定する.

    for_nest_square_circle

    Code

    例5

    正方形を回転させながら並べて描画する.

    for_nest_square_rotate

    Code

    例6

    ランダムな楕円を20個重ね,X軸方向へ10個描画する.

    for_nest_elps_x

    Code

    例7

    ランダムな位置に30個の花を描画する.

    for_nest_flower

    Code

    演習6

    任意の例のサンプルプログラムをベースに自由に変更を加える.

    例5をベースにした作例

    for_nest_square_circle_ex

    Code

    多重ネストを使った表現

    例1

    ランダムに重ねた8個の正方形をスクリーンに並べる.

    for_nests_square

    Code

    例2

    ランダムに回転して重ねた(差の絶対値)6個の正方形をスクリーンに並べる.

    for_nests_squres_rot

    Code

    例3

    60°ずつ回転して重ねた(乗算)6個の楕円をスクリーンに並べる.

    for_nests_ellipses_rot

    Code

    演習7

    以下の多重ネストのプログラムを自由に編集し,多重ネストにより複雑な描画結果が出力されることを確認する.

    120°ずつ回転して重ねた3個の長方形をスクリーンに並べる.

    for_nests_rect

    Code

    作例

    for_nests_sasa

    Code

    その他のサンプル

    反復

    repeat

    Code

    振動

    for_wave

    Code

    遷移

    transition

    Code

    乱雑さ

    random

    Code

    モアレ

    moire

    Code

    回転対称

    ひし型の回転対称

    synmetry_rot

    Code

    並進対称

    synmetry_trl

    Code

    第5回:制御文:条件分岐

    条件分岐を本格的に用いるのはアニメーションからだが,静止画像の表現に用いることもできる.

    if文の基本

    最初のサンプル

    X座標値が0, 100, 200, 300の時に塗色をランダムなグレー値へ切り替える.

    条件式iX % 100 == 0は「変数iXの値を100で割ったときの余りが0」の時に真(true)を返す.

    if_squares_random_gray

    Code

    if文のフロー

    if_flow_square

    構文

    if_koubun

    ブロック

    if_koubun_block

    例1

    X座標値が0, 100, 200, 300の時に正円を追加で描画する.

    if_squares_and_circles

    Code

    例2

    Y座標値が0, 100, 200, 300の時に正円を追加で描画する.

    if_add_circle_y

    Code

    https://processing.org/reference/if.html

    演習1

    if_squares_circles_20

    上図の描画を行うプログラムを作成する. X座標値:60ピクセル毎に正円を追加して描画する.

    以下のプログラムを元にif文を用いて作成する.

    if_squares20

    Code

    以下,完成プログラム

    Code

    if-else文の基本

    X座標値が0, 100, 200, 300の時に塗色をグリーンに,それ以外の時にブルーへ切り替える.

    if_else_squares_gb

    Code

    if-else文のフロー

    if_else_flow

    構文

    if_else_koubun

    処理の流れ

    if文においては,いずれか1つのブロック文のみを実行し,その後ブロック文の次の文へ処理が移行する. (2つ以上のブロックを実行することはない.)

    条件式の結果が真(true)の場合

    flow_if_else_flow_true

    条件式の結果が偽(false)の場合

    flow_if_else_flow_false

    例1

    X座標値が0, 100, 200, 300の時に正円を,それ以外の時に正方形を描画する.

    if_else_squares_circles

    Code

    例2

    Y座標値が0, 100, 200, 300の時に正円を,それ以外の時に正方形を描画する.

    if_else_add_circle_y

    Code

    https://processing.org/reference/else.html

    演習2

    if_else_squares_circles20

    上図の描画を行うプログラムを作成する. X座標値:200ピクセル毎に(正方形ではなく)正円を描画する.

    以下のプログラムを元にif-else文を用いて作成する.

     

    if_squares20

    Code

    以下,完成プログラム

    Code

    乱数を使った条件式による表現

    確率で分岐する条件文

    下のプログラムのように,条件式に乱数を用いることで確率で分岐する表現を行える.

    0~100値の間のランダム

    Code

    0.0~1.0値の間のランダム

    Code

    例1

    50%の確率で白黒を塗分ける例

    if_random_squares_bw

    Code

    例2

    50%の確率で正方形と正円を描き分ける例

    if_random_squares_circles

    Code

    剰余算を使った条件式による表現

    剰余算を使った条件式は既出だが,改めて整理する.

    二回に一度分岐する条件文

    下のプログラムのように,条件式に剰余算を用いることで交互に分岐する表現が行える.

    変数iが0~99まで1ずつ増えるfor文

    Code

    例1

    奇数・偶数列によって白黒を塗分ける.

    if_else_squares_kiguu

    Code

    数回に一度分岐する条件文

    変数iが0~99まで1ずつ増えるfor文

    Code

    例2

    3回に一度白で塗る.

    if_else_squares_1by3

    Code

    演習3

    if_else_squares_circles_wb

    上図の描画を行うプログラムを作成する.

    以下のプログラム(例3と同じ)を元にif-else文を追記し,作成する.

    if_else_squares_kiguu

    Code

    以下,完成プログラム

    Code

    行をずらす表現

    例1

    以下のテンプレートを元に様々な表現ができる.

    奇数行を半分ずらして正方形を描画する.

    if_else_half_squares

    Code

    例2

    六角形を並べた表現

    if_else_if_hex

    Code

    例3

    六角形を隙間なく並べた表現

    if_else_if_hex_fill

    Code

    例4

    麻の葉模様を敷き詰めた表現.

    if_else_asanoha

    Code

    例5

    青海波(せいがいは)模様の表現

    if_else_seigaiha

    Code

    例6

    市松模様の表現

    if_else_ichimatsu

    Code

    演習4

    以下のプログラム(例1)を元に自由に画像を作成する.

    奇数行を半分ずらして正方形を描画する.

    if_else_half_squares

    Code

    以下,作例

    if_else_half_6squares

    Code

    else ifの基本

    if_else_if_squares_circles_triangles

    Code

    else ifのフロー

    if_else_if_flow

    構文

    if_else_if_koubun

    例1

    塗色に3色のグレー値をランダムに使用する.

    if_else_if_squares_bwg

    Code

    例2

    正方形を三分の一ずつずらして並べる.

    if_else_if_squares

    Code

    例3

    3種類の図形と3種類のグレー値を用いる.

    if_else_if_tcspng

    Code

    例4

    3色のグレー値を使った花の表現

    if_else_if_flower

    Code

    演習5

    演習5で作成したプログラムにelse if{}を追加し,自由にアレンジする.

    以下,作例

    if_else_if_6squares

    Code

    switch文

    構文

    Code

    処理の流れ

    1. 変数or式の返す値と等しいラベルを検索

      flow_switch_flow_01

    2. 該当するラベルの位置に記述されている処理を,break;の文の位置まで実行する. 下図の例では,青枠で囲まれた命令文のいずれか一つが実行される.

      flow_switch_flow_02

    3. いずれかのラベル位置の処理が終了したら,ブロック文の次の文へ処理を移行する.

      flow_switch_flow_03

    4色が交互に出現するストライプの描画.

    Code

    switch_sample

    https://processing.org/reference/switch.html

    論理演算式による表現

    論理演算(ブーリアン演算)

    論理演算子

    条件式演算子条件ベン図演算
    条件式A && 条件式B&&条件式Aが真,かつ条件式Bが真flow_boolean_and論理積 AND
    条件式A || 条件式B||条件式Aが真,もしくは条件式Bが真flow_boolean_or論理和 OR
    ! 条件式!条件式が偽flow_boolean_not否定 NOT

    https://processing.org/reference/logicalAND.html https://processing.org/reference/logicalNOT.html https://processing.org/reference/logicalOR.html

    例1

    論理演算を使った市松模様の描画

    logic_ope_ichimatsu

    Code

    第5回:配列

    配列の基本1

    任意のRGB値を配列に格納したプログラム

    array_rgb

    Code

    配列( Array )とは

    変数を複数連結したもの.

    配列のハードウェア的イメージ

    concept01

    配列の構成

    array_memory_irgb

    配列を作る.

    構文

    値の数は自由に設定することができる.

    要素のデータ型[] 配列名 = { 値0, 値1, 値2, 値3, , , , 値n };

    例1

    int型(整数型)の名前がiXの配列の宣言・初期化

    Code
    確保されるメモリのイメージ

    array_X0_10

    例2

    float型(実数型)の名前がfRGBAの配列の宣言・初期化

    Code
    確保されるメモリのイメージ

    array_fRGBA

    要素の値を取得する

    ある配列の要素の値を取得するには,下のような記述を行う.

    配列名[ 要素番号 ]

    例1

    要素番号:2の値を矩形のX座標値に使用する.

    array_ix_rect

    Code

    メモリ上のイメージ

    array_shokika_iX0_10

    例2

    配列のそれぞれの要素をRGBA値として使用する.

    array_rgba_rect

    Code

    メモリ上のイメージ

    array_shokika_fRGBA

    https://processing.org/reference/Array.html

    演習1

    array_ellipse_prop

    下のプログラムは楕円を描画するための情報を配列に格納し,描画に用いている. 3行目の配列に格納する情報を書き換え,上図のように楕円が描画されるように正しく書き換える.

    array_ellipse_origin

    Code

    配列の基本2

    要素へ値を代入する

    変数と同じく,配列の要素も値を代入することができる.

    配列名[ 要素番号 ] = 値;

    要素数の取得

    配列名.length

    なぜ必要なのか

    要素数の変更に柔軟に対応できるため.

    例えば,以下の配列の場合

    int[] iR = { 10, 20, 30 };

    これを次のように書き換えると

    int[] iR = { 10, 20, 30, 40, 50 };

    要素数が増えるが,配列名.lengthは自動的に更新される.

    https://processing.org/reference/arrayaccess.html

    ランダムに配列の要素を使用する.

    6種類のX座標値をランダムに用いる正円の描画

    array_random_circlex

    Code

    要素番号をランダムに決定する.

    ある配列の要素番号をランダムに取得する場合,以下のように記述するとよい.

    floor( random( 配列名.length ) )

    通常は上記の式を変数に代入し,その変数を用いて要素の値を取得するとよい.

    int iElem = floor( random( iCircleX.length ) ); circle( iCircleX[ iElem ], random(200), 10 );

    参考:小数点以下を切り捨てる.

    例1

    4種類の大きさからランダムに用いる正円の描画

    array_4patterns_circles

    Code

    例2

    6種類のX座標値をランダムに用い,さらに4種類の色情報(Gray値)のランダムな塗分け行う描画

    array_4patterns_grays

    Code

    演習2

    下のプログラムは完全にランダムな色の正方形を描画している. このプログラムを,3つの配列の値を色情報として使用して描画が行われるように完成させる.

    array_mozaic_random

    Code

    以下,作例

    array_mozaic_sakurei

    2次元配列の基本

    4種類のRGBの組み合わせからランダムに選択した塗色の正円を描画する.

    array_2d_random_circle_rgb

    Code

    2次元配列とは

    2次元配列を作る.

    構文

    array_2d_koubun

    2次元配列の値を取得する.

    2次元配列は,配列名と2つの要素番号を使って指定のデータにアクセスする.

    array_2d_taiou

    2次元配列における要素数の取得

    構文

    1次元目(iRGB[○][])の要素数の取得

    配列名.length

    2次元目(iRGB[][○])の要素数の取得

    配列名[0].length

    0の部分は正しい要素番号であれば何でもよい.

    array_2d_length

    2次元配列による表現

    頂点XY座標値

    各行が頂点それぞれの座標値を表す.

    Code

    array_two_xy_concept

    2次元配列を使った多角形の描画.

    array_two_5vertexes

    Code

    描画結果と頂点の対応は下図のようになる.

    array_two_5vertexes_concept

    RGB情報の記述

    Code

    array_colors_rgb_concept

    RGB配列を使った様々な図形の描画.

    array_colors_primitives

    Code

    HSB情報の記述

    Code

    array_colors_hsb_concept

    HSB配列を使った格子形状の描画.

    array_colors_hsb

    Code

    演習3

    以下のサンプルに頂点情報(配列の要素)を追加し,より豊かな多角形表現を行ってみましょう.

    2次元配列を使った多角形による回転対称の表現

    array_2d_rotate_vertexes

    Code

    以下,作例

    array_2d_rotate_vertexes_sakurei

    Code

    配列を初期値を入力せずに作る.

    配列に初期値を代入せずに作成することもできる. その場合,宣言文を記述することになる.

    宣言文

    構文

    要素のデータ型[] 配列名 = new 要素のデータ型[要素数];

    例1

    int型(整数型)の要素を10個持つ,名前がiXの配列の宣言文

    Code

    例2

    float型(実数型)の要素を4個持つ,名前がfRGBAの配列の宣言文

    Code

    初期化

    Code

    例1

    int型(整数型)の要素を10個持つ,名前がiXの配列の宣言・初期化

    Code

    例2

    float型(実数型)の要素を4個持つ,名前がfRGBAの配列の宣言・初期化

    Code

    for文を使った初期化

    for文を使った基本的な初期化

    Code

    例1

    全ての要素を0で初期化する.

    Code

    例2

    全ての要素を要素番号×5で初期化する.

    Code

    2次元配列を初期値を入力せずに作る.

    宣言文

    構文

    要素のデータ型[][] 配列名 = new 要素のデータ型[要素数][要素数];

    例1

    int型の行数4, 列数2の2次元配列iXYを宣言する.

    Code

    array_2d_xy

    例2

    float型の行数6, 列数3の2次元配列fRGBAを宣言する.

    Code

    array_frgba

    for文を使った初期化

    for文のネスト使った初期化

    行はロウ( Row ),列はカラム(Column)という. 繰り返し変数名はそれらに準じている.

    Code

    例1

    int型の行数3,列数4である2次元配列iAを宣言し,全ての要素を0で初期化する例. ネストを用いる.

    Code

    例2

    100個の正円の色情報を配列に格納し,描画に用いた例. ネストを用いない.

    array_2d_100circles_color

    Code

    例3

    100個の正円の描画情報を配列に格納し,描画に用いた例. ネストを用いない.

    array_2d_100circles

    Code

    参考: ルール90セル・オートマトン

    初期状態

    cell_automaton01_01

    隣接するセルの合計が次の(行の)値になる.

    このルールをさらに次の行へと進めていく.

    cell_automaton01_02

    奇数のセルを描画する.

    プログラム中では奇数を1,偶数を0として配列に格納している.

    cell_automaton01_03

    制作手順

    今回制作するプログラムでは,セル=ピクセルと考える.

    1. 二次元配列の宣言,初期化 格子状のセルを表す配列を用意する.

      Code
    2. 初期状態の入力

      • 最初の行の中心のセルを1,それ以外は0

      • 初期状態の唯一のセルを描画

      ※以上の処理をステップ1のプログラムの後に追加する.

      cell_automaton01_01

      Code
    3. 隣接するセルの合計が次の(行の)値になる.

      • for文のネストによる繰り返し

      ※以上の処理をステップ2のプログラムの後に追加する.

      cell_automaton01_02

      Code
    4. スクリーン両端の処理 ステップ3のままだとiX-1の値がマイナスになったり,iX+1の値が配列の要素番号の最大を超えてしまう. ※ステップ3までのプログラムを書き換えると以下のようになる.

    完成したプログラム

    cell_automaton01_04

    Code

    初期状態(一行目のセルの状態)を変える

    巻貝の表面模様のような画像が生成される. この例では最初の行のセルの値が0か1かを全てランダムに決定している.

    cell_automaton01_05

    Code

    第6回:アニメーション

    Processingにおけるアニメーション

    ランダムな位置に正円を描画するアニメーション

    animation_random_circles

    Code

    Activeモード

    アニメーションを行う場合,Activeモードでプログラムを記述する必要がある. 全体のプログラムを二つのブロックに分けて記述する.

    Staticモード

    https://processing.org/reference/setup_.html https://processing.org/reference/draw_.html

    動画のフレームとは

    フレームレートとは

    フレームレートの設定

    frameRate()

    1秒間にdraw(){}が実行される回数を指定できる. 特に指定をしない場合,デフォルトは60となる.

    構文

    frameRate( fps )

    https://processing.org/reference/frameRate_.html

    引数

    1秒間に描画するフレーム数

    例1

    ランダムな位置に正円を描画するアニメーション

    animation_random_circles_fr8

    Code

    例2

    ランダムな大きさ,色の正円を描画するアニメーション

    anim_random_size_col_circle

    Code

    例3

    横一列にランダムな色の正方形を並べて描画するアニメーション

    参考:小数点以下を切り捨てる.

    animation_random_squares

    Code

    例4

    縦横にランダムな色の正方形を並べて描画するアニメーション

    animation_random_squares_2d

    Code

    演習1

    まずはActiveモードの挙動を体験する.

    以下のプログラムを元に,2つの図形描画命令を使ったランダムなアニメーションを自由に作成する.

    anim_randam_circles2

    Code

    以下,作例

    anim_random_circles_sky

    Code

    画面のリフレッシュによる表現

    ランダムな位置に1つの正円を描画するアニメーション

    animation_random_circles_ref

    Code

    画面のリフレッシュ

    animation_random_circles_ref

    例1

    同X軸上にランダムな色の正方形を1つ描画するアニメーション

    animation_random_squares_ref

    Code

    例2

    ランダムな大きさ,色の正円を1つ描画するアニメーション

    anim_random_size_col_circle_one

    Code

    アルファ値を使った画面リフレッシュ

    background()の代わりに半透明の矩形を用いて画面をリフレッシュすることで,少しずつ古い図形が消えていくような表現が実現できる.

    参考:画面サイズを取得する.

    Code

    例1

    同X軸上にランダムな色の正方形を1つ描画し,フェードアウトするアニメーション

    anim_squares_fade

    Code

    例2

    終端がランダムな線を描画し,フェードアウトするアニメーション

    anim_random_lines_sparks

    Code

    例3

    縦横にランダムな色の正方形を並べて描画し,フェードアウトするアニメーション

    anim_random_squares_fade

    Code

    演習2

    演習1に「アルファ値を用いた画面のリフレッシュ」を追加した以下のプログラムを元に,自由にアレンジを加える.

    anim_random_circles_fade

    Code

    以下,作例

    anim_random_ellipses_suiteki

    Code

    変数によるアニメーション表現

    animation_var_square_loop

    Code

    グローバル変数

    animation_var_kihon

    例1

    フレーム毎に正方形の数を増やしながら並べて描画

    anim_var_squares

    Code

    例2

    正方形のグレイ値を1ずつ増やすアニメーション

    anim_square_gray

    Code

    例3

    円弧の終わりの角度を1度ずつ増やすアニメーション

    anim_arc_pie

    Code

    例4

    楕円の幅を1ずつ減らすアニメーション

    anim_ellipse_width

    Code

    演習3

    任意の図形を一つ描画し,グローバル変数を使ってループアニメーションを作る.

    以下,作例

    anim_trianglefan_loop

    Code

    座標変換によるアニメーション表現

    例1

    正円が4度ずつ回転するアニメーション

    anim_circle_rot

    Code

    例2

    線が1度ずつ回転するアニメーション

    anim_line_rot

    Code

    例3

    60個の三角形を描画し,現在のフレームによって色を変えるアニメーション

    参考:三角形を描画する.

    anim_triangle60

    Code

    例4

    星型多角形が1度ずつ回転するアニメーション

    anim_star_rot

    Code

    例5

    12個の正方形を円状に描画するアニメーション

    anim_squares_rot12

    Code

    演習4

    例5のプログラムを元に,図形描画や色の指定などを追加し自由にアレンジする.

    以下,作例

    例5をベースにブレンドモードなどを使用した表現

    anim_12shapes_toryou

    Code

    簡易物理アニメーション

    厳密な物理計算を行う必要はなく,簡単な算術式で表現ができる. フレーム番号をグローバル変数iFrameに保存しておき,時間の値として計算に用いている.

    例1

    自由落下

    anime_freefall_circle

    Code

    例2

    水平投射

    anim_throw_horizon

    Code

    例3

    鉛直投げ上げ

    anim_throw_up

    Code

    例4

    斜方投射

    anime_throw_naname

    Code

    例5

    単振動

    animation_wave_circle

    Code

    例6

    跳ね返り

    anim_circle_hanekaeri

    Code

    シーケンスによる表現

    anim_sequence_simple

    Code

    if文によるシーケンス

    anim_sequence_basic

    例1

    3つの動きを行う円のアニメーション

    ジャンプ用のグローバル変数iJumpDegを追加している.

    anim_sequence_circle

    Code

    例2

    例1に変更を加えたアニメーション

    anim_sequence_circle_jump

    Code

    例3

    連続して弾むようなアニメーション

    anim_sequence_circle_bound

    Code

    例4

    正方形が遅れて動くアニメーション

    anim_sequence_block

    Code

    演習5

    下の基本のシーケンス表現プログラムを自由にアレンジし,仕組みを体験的に理解する.

    anim_sequence_simple

    Code

    時間を考慮したアニメーション表現

    テキスト描画

    text()

    構文

    文字列の描画を行う場合,ダブルクォーテーション""で囲む.

    text( "描画する文字列", X座標値, Y座標値 )

    text( 描画する値, X座標値, Y座標値 )

    text( 変数, X座標値, Y座標値 )

    説明

    スクリーンにテキストを描画する. フォントの色の変更はfill()を使う.

    https://processing.org/reference/text_.html

    テキストの大きさを指定する.

    textSize()

    構文

    textSize( size )

    引数

    フォントサイズ(ピクセル単位)

    説明

    テキスト描画のフォントサイズを設定する.

    https://processing.org/reference/textSize_.html

    text_3way

    Code

    テキストの揃え位置を指定する.

    textAlign()

    構文

    textAlign( alignX )

    textAlign( alignX, alignY )

    説明

    テキスト描画における行揃えの位置を指定する.

    引数

    alignX:左右の揃え位置LEFT, CENTER, or RIGHT

    alignY:TOP, BOTTOM, CENTER, or BASELINE

    text_align

    Code

    時刻を取得する.

    second()

    minute()

    hour()

    構文

    second() // 秒(0 - 59) minute() // 分(0 - 59) hour() // 時(0 - 23)

    説明

    現在の時刻における秒,分,時を取得する. アニメーションに用いる場合,draw(){}の中で使用し,最新の時刻を常に取得する必要がある.

    https://processing.org/reference/second_.html https://processing.org/reference/minute_.html https://processing.org/reference/hour_.html

    例1

    デジタル時計

    anim_time_digital

    Code

    例2

    オーソドックスな時計

    anim_clock

    Code

    例3

    秒毎に正方形が大きくなるアニメーション

    anim_block_second

    Code

    例4

    1秒毎に正円が大きくなり,分が切り替わると正円がしぼむアニメーションを再生する.

    anime_time_sequence_circle_shibomu

    Code

    anim_time_sequence_min_kirikae

    例5

    1秒毎に正円が自由落下し,分が切り替わると正円が広がるアニメーションを再生する.

    anime_time_sequence_freefall

    Code

    演習6

    秒を取得するsecond()を用い,任意のアニメーションを作成する. 余裕があればminute()も使用する.

    課題3のための実験と考えるとよい.

    サンプル集

    配列を使った雨の表現

    anim_amatsubu

    Code

    配列を使った粒子状の表現

    anim_particle

    Code

    親子関係の入れ子アニメーション

    惑星の公転のような回転アニメーション

    anim_wakusei

    Code

    波形の移動(位相変化)アニメーション

    pulse_translate

    Code

    円弧による沈む夕日状の表現

    anim_arc_yuuhi

    Code

    時間帯に応じて背景色を変更する.

    参考:論理演算子

    anim_bg_color_hour

    Code

    内側から多角形を増やして描画する年輪のような表現

    anim_nenrin

    Code

    決まった位置の星が明滅する表現

    anim_fixed_stars

    Code

    第7回:関数の作成

    関数を作成する理由

    1. プログラムを見やすくする.

      特にdraw(){}ブロックが長くなり,混乱することを防ぐ.

    2. 同じような処理を共通化する.

      引数が異なるだけで命令文が重複する箇所などを関数で共通化し,プログラム全体の長さと効率を改善する.

    3. 役割によってプログラムを分け,1つの機能の作成に集中しやすくする.

      特にdraw(){}ブロック内に記述される「図形描画」「アニメーションの更新」など役割でプログラムを分け,それぞれの機能を作成する際に,他の処理を意識しなくてよいようにする.

    描画命令文をまとめる関数

    4つの図形描画を行う関数draw4Primitives()

    func_4primitives

    Code

    関数( function )とは

    関数の呼び出し

    func_call

    関数の定義

    func_define

    関数定義の構文

    Code

    関数定義の記述場所

    関数定義は,setup(){}, draw(){}のブロック外に書く. 通常は,プログラムの後ろに記述することを推奨.

    Code

    例1

    for文で繰り返し正方形描画を行う関数drawSquares()

    func_squares

    Code

    例2

    正方形を円状に描画する drawSquares()

    anim_squares_rot12

    Code

    例3

    雨の描画を行う関数drawRain()

    func_rain_circle

    Code

    演習1

    以下のプログラムをコピーし,描画命令文を分けて関数化する. 関数名はdraw4Primitives()とする.

    func_4primitives

    Code

    アニメーション用変数の更新関数

    4つの図形描画を行う関数draw4Primitives() アニメーション用変数の更新関数:update()

    func_4primitives

    Code

    アニメーション更新用関数

    func_update

    例1

    for文で繰り返し正方形描画を行う関数drawSquares() アニメーション用変数iXの更新を行う関数update()

    func_squares

    Code

    例2

    正円のシーケンスアニメーションを行う関数update()

    anim_sequence_simple

    Code

    例3

    円弧+正円のシーケンスアニメーションを行う関数update() 円弧+正円の描画を行う関数drawBB8()

    func_bb8

    Code

    演習2

    例3のプログラムに回転アニメーション用のグローバル変数を1つ追加し,その変数を使って下図のような回転アニメーションを加える.回転アニメーションは全く同じである必要はない.

    func_bb8_rot

    以下,作例

    Code

    独自の図形描画関数を作る.

    六角形を描画する関数drawHexagon() 時分秒ごとに大きさが変わる六角形を描画する.

    func_hexagon

    Code

    引数のある関数のコール

    func_hexagon_call

    引数のある関数の定義

    func_hexagon_define

    返り値のある関数定義の構文

    仮引数は,区切りで複数記述できる. 受け取る情報の数だけ仮引数を宣言する.

    Code

    実引数と仮引数のおさらい

    func_hexagon_parameters

    例1

    回転角度を指定して星型多角形を描画する関数drawStar()

    anim_star_rot

    Code

    例2

    突起の数を指定してスパイク多角形を描画する関数drawSpikeBall()

    func_uni

    Code

    例3

    位置やスケール値を指定して顔のような模様を描画するdrawChiikawa()

    func_chiikawa

    Code

    例4

    位置やHSB値を指定して顔のような模様を描画するdrawChiikawa()

    func_chiikawa_hsb

    Code

    演習3

    以下のデ情君ロゴを描画する関数drawDejoukun()に引数を追加し,任意のアニメーションを加えた表現を作る.

    dinfo_logo_sample

    Code

    以下,作例

    func_dejoukun_rot_randcol

    Code

    関数内で別の関数を呼び出す.

    例1

    12個の六角形を描画する関数draw12Hexagons()内で六角形を描画する関数drawHexagon()を呼び出す.

    func_func_hexagons

    Code

    例2

    25個の顔を描画するdraw25Faces()内で顔を描画するdrawFace()を呼び出す.

    func_face_mouthopen

    Code

    時間を考慮したアニメーションのためのフレームワーク

    下記のプログラムをテンプレートとして使用することができる.

    一見複雑に見えるが,主に記述する箇所は以下の3か所

    1. 1行目:アニメーション用変数定義を記述する.

    2. 図形描画drawPrimitives(){}のブロック内を記述する.

    3. アニメーション用変数の更新updateAnim()のブロック内を記述する.

    Code

    例1

    1分間で水が溜まっていく表現

    func_anim_framework_mizu

    Code

    例2

    1秒ごとに幅が拡大縮小し,分の切り替わりでジャンプするデ情くんの表現

    func_dejoukun_jump

    Code

    例3

    1秒ごとに下へ移動し,分の切り替わりでしぼむ顔の模様の表現

    func_chiikawa_king

    Code

    演習4

    以下の時間を考慮したアニメーションのフレームワークを元に,任意のアニメーションを作成する. もしくは,前述の例1~3を元に変更を加える.

    Code

    第9回:再帰関数

    再帰関数の基本

    関数の中で再帰呼び出しを2回行い,半径を1/2にしながら円を描画する.

    recursive_circle

    Code

    再帰関数とは

    再帰呼び出し

    recursive_circle_call

    再帰の階層を表す仮引数

    recursive_circle_param

    再帰終了(続行)条件

    recursive_circle_condition

    最初の関数呼び出し

    スタックオーバーフローエラー

    再帰終了条件を正しく記述しないと,プログラムがフリーズし,ProcessingのGUIから終了することができなくなる. 以下のようなエラーが表示される.

    recursive_error_console

    仮にその状況に陥って知った場合の解決先を以下に示す.

    windowsの場合

    1. Ctrl + Shift + Esc キーを同時に押してタスクマネージャーを開く

    2. プロセス > 応答していないアプリケーションを右クリックする.

    3. 「強制終了」をクリックする.

    ウィンドウ右上の×ボタンをクリックし,プログラムを強制終了させる.

    Macの場合

    1. アップルメニュー >「強制終了」と選択

    2. 表示されるダイアログでアプリケーションを選択して、「強制終了」をクリックする.

    再帰関数を用いたテンプレート

    以下のプログラムをテンプレートとして用いるとよい.

    プログラムの記述ミスにより無限ループによるエラー落ちを防止できる.

    Code

    例1

    再帰深度ごとに塗色を変える.

    recursive_circle_gray

    Code

    例2

    最初の関数呼び出しを2回行う.

    recursion_circle_firtscall2

    Code

    例3

    半径を1/3にしながら円を再帰的に描画する.

    recursive_circle_gray_3

    Code

    演習1

    前述のいずれかの例を元に,任意のアレンジを加える.

    作例

    関数の中で再帰呼び出しを4回行い,4つの内包する円を再帰的に描画する.

    recursive_circle4

    Code

    入れ子構造の表現

    これらの図形は「自己相似」ともいう.

    例1

    モニターに自身のモニターを映す.

    recursion_ireko_monitor

    Code

    例2

    4分割した正方形の再帰描画

    recursive_4squares_divided_03

    Code

    例3

    簡易なアンモナイト状の模様

    recursion_ammmo

    Code

    演習2

    再帰関数を使い,自分なりの入れ子構造の作成を試みる.

    難しい場合,前述の例のプログラムにアレンジを加える.

    シェルピンスキーのカーペット

    曼荼羅のような図形の描画を行う. シェルピンスキーのカーペットともいう.

    段階を踏んだ演習形式で製作する.

    recursion_mandara

    1. 再帰プログラムのテンプレートをコピーする.

    前述の再帰プログラムのテンプレートをコピーする.

    Code

    2. ウィンドウサイズを書き換える.

    1000 × 1000

    Code

    3. 再帰関数名を書き換える.

    drawRecursiondrawMandara

    Code

    4. 描画内容を考える.

    recursive_mandara_concept01

    5. 引数を記述する.

    recursive_mandara_params

    Code

    6. 矩形描画命令を記述する.

    recursive_mandara_01

    Code

    7. 左上の再帰呼び出しを考える.

    recursive_mandara_unit

    8. 左上の再帰呼び出しを記述する.

    recursive_mandara_02

    Code

    9. その他周囲の7つ分の再帰呼び出しを考える.

    残りの7つの再帰呼び出しもステップ8と同様の考えで,下図を参考に考えることができる. recursive_mandara_next

    10. その他周囲の7つ分の再帰呼び出しを記述する.

    再帰呼び出しを7つ追加して記述する.

    recursion_mandara

    Code

    演習3

    前述のシェルピンスキーのカーペットに任意のアレンジを加える.

    作例

    recursion_mandara_sakurei

    Code

    再帰木

    木のような図形の描画 L System と呼ばれるアルゴリズムの簡易版

    段階を踏んだ演習形式で製作する.

    recursive_tree_finish

    1. 再帰プログラムのテンプレートをコピーする.

    前述の再帰プログラムのテンプレートをコピーする.

    Code

    2. ウィンドウサイズを書き換える.

    1000 × 1000

    Code

    3. 再帰関数名を書き換える.

    drawRecursiondrawTree

    Code

    4. 描画内容を考える.

    recursive_tree_params

    また,これらの仮引数に渡す最初の実引数は下図のようになる.

    recursive_tree_first_line

    5. 引数を記述する.

    引数を記述する.

    Code

    6. 終端のXY座標値を記述する.

    ある線の始点と角度,線の長さの情報があれば,三角関数を用いることで終点のXY座標値を算出できる.

    Code

    7. 線の描画命令を記述する.

    線の描画命令を記述する.

    recursion_tree_firstbranch

    Code

    8. 再帰呼び出しの実引数を書き換える.

    recursion_tree_change

    Code

    9. 枝分かれさせる.

    recursive_tree_second_lines

    recursion_tree_branch2

    Code

    10. 再帰の最大深度を増やす

    最大深度:16にする.

    recursive_tree_finish

    Code

    演習4

    前述の再帰木は以下の値を変えることで,形状の変化を操作できる. 任意のアレンジを加える.

    作例

    recursive_tree_param_change

    Code

    サンプル集

    座標変換を使った再帰木

    こちらの方がアレンジを加えやすい場合もある.

    recursive_tree_finish

    Code

    応用例

    recursion_tree_transform

    Code

    シェルピンスキーのギャスケット

    正三角形で構成される模様.

    recursive_triangle_step04

    Code

    再帰回数:0

    recursion_triangle_0

    再帰回数:1

    recursive_triangle_step01

    再帰回数:2

    recursive_triangle_step02

    再帰回数:3

    recursive_triangle_step03

    応用例

    シェルピンスキーのギャスケットを10個敷き詰め,半分は上下反転させる.

    recursive_triangle_example

    Code

    黄金比

    矩形を再帰的に黄金比に分割しつつ,弧を描画する.

    recursive_golden_rect

    Code

    応用例

    ゼンマイの束状の表現

    recursive_golden_rect_example

    Code

    矩形の再帰的分割描画

    recursive_rect_devided

    Code

    応用例

    矩形の代わりにカプセル状の図形で満たす表現

    recursive_rect_devided_example

    Code

    ドラゴン曲線

    フラクタル図形の一種. 「線を二等分し,角度が90°をなす二本の線を生成する」処理を再帰的に行うことで描画される図形.

    recursive_dragoncurve

    Code

    再帰回数:0

    recursive_dragoncurve_0

    再帰回数:1

    recursive_dragoncurve_1

    再帰回数:2

    recursive_dragoncurve_2

    再帰回数:3

    recursive_dragoncurve_3

    分割後の点の座標の求め方

    下図左のような(グレーの)直角三角形を基準に,幾何学的に分割後の点の座標値( fNewX, fNewY )を求めることができる.

    recursive_dragoncurve_model

    応用例

    recursive_dragoncurve_example

    Code

    コッホ曲線

    「線を三等分に分割し,正三角形を作る」処理を再帰的に行うことで描画される図形.

    recursive_kochCurve

    Code

    再帰回数:0

    recursion_koch_0

    再帰回数:1

    recursive_kochCurve_simple_01

    再帰回数:2

    recursive_kochCurve_simple_02

    分割後の3点の座標の求め方

    recursive_kochCurve_model

    上図のように,飛び出る点の座標( fPointXY[1][0], fPointXY[1][1] )は,二つの角度の合計から求めることができる.

    詳しくは調べてください. 再帰関数の中で三角関数の加法定理を用いているため,難易度高め.

    応用例1

    コッホ曲線を繋げた表現

    recursion_koch_snowcrystal

    Code

    応用例2

    雪の結晶のような模様の表現

    recursive_kochCurve_example

    Code

    マンデルブロ集合の描画

    recursive_maandelbrotSet

    Code

    ジュリア集合の描画

    recursive_juliaSet

    Code

    第10回:プログラミング環境

    静止画の出力と再描画

    ウィンドウ上でマウスボタンをクリックすることで静止画の再描画とpngファイルの出力を行う.

    save_redraw

    Code

    使い方

    ウィンドウ上でマウスボタンをクリックする.

    説明

    留意点

    再帰関数用テンプレート

    再帰関数プログラム(静止画出力と再描画機能付き)のテンプレート

    Code

    ランダム値を用いた再帰木の静止画出力と再描画

    save_redraw_tree

    Code

    関数を別ファイルに分ける.

    関数を別ファイルに分けるとプログラム行数が減って見やすくなる.

    前述の例「ランダム値を用いた再帰木の静止画出力と再描画」を別ファイルに分けた例

    divide_sourcefiles

    1. 新規タブを作成する

    create_new_tab_recursion

    2. 関数定義部分を新規タブにカット&ペーストする.

    メインのプログラムのタブから,新規タブへ関数定義部分を移植する.

    cut_and_paste_recursion

    新規タブの削除のやり方

    削除したいプログラムのタブを選択し,エディターのタブ右端の▼アイコンをクリック > 削除

    delete_tab

    第12回:クラス

    オブジェクト指向

    円のXY座標値と大きさの情報をまとめたクラスを使った描画

    class_circle

    Code

    オブジェクト指向とは

    クラスとは

    クラスを使ったプログラムの概要

    class_gaikan

    フィールドで図形の情報を保存する.

    円のXY座標値と大きさの情報をまとめたクラスを使った描画

    class_circle

    Code

    class_cicle_field

    クラスの定義

    クラス名は任意の名前を記述できる.

    Code

    フィールド

    class_field

    オブジェクトの作成

    class_circle_create

    オブジェクトのフィールドへのアクセス

    class_circle_access

    例1

    Circleクラスを使った円の描画

    class_circle_fill

    Code

    例2

    Rectクラスを使った長方形の描画

    class_rect_fill

    Code

    例3

    Lineクラスを使った線の描画

    class_line

    Code

    演習1

    「楕円のXY座標値と大きさ,塗色の情報をまとめたクラスを使った描画」を行うプログラムを作成する.

    class_ellipse_fill

    以下,完成プログラム例

    Code

    メソッドから描画を実行する.

    Circleクラスを使った円の描画

    class_circle

    Code

    メソッド

    class_method

    メソッドの実行

    生成されたオブジェクトからメソッドを実行することができる.

    オブジェクト.関数名()

    class_method_run

    例1

    Circleクラスを使った円の描画

    class_circle_square

    Code

    例2

    Figureクラスを使った複数図形の描画

    class_circle_square45

    Code

    例3

    Lineクラスを使った線の描画

    class_line

    Code

    例4

    Logoクラスを使った複雑な図形の描画

    dinfo_logo_sample

    Code

    演習2

    例4のプログラムに塗色を指定するプログラムを作成する.

    条件

    class_dejoukun_fill

    以下,完成プログラム例

    Code

    コンストラクタで初期情報を設定する.

    これまではフィールドの初期値はクラス定義の中に直接記述していた.

    class_field

    オブジェクト生成時にフィールドの初期値を引数で渡すこともできる.

    Circleクラスを使った2つの円の描画

    class_2circles

    Code

    コンストラクタ

    class_constructor

    コンストラクタを呼び出す.

    class_constructor_call

    例1

    フィールドの全ての情報をコンストラクタで初期化する必要は無い. この例では塗色はコンストラクタで初期化していない.

    Circleクラスを使った2つの円の描画

    class_2circles_fill

    Code

    例2

    Faceクラスを使った2つの顔模様の描画

    class_2faces_simple

    Code

    例3

    例2にスケール値をコンストラクタで指定できるようにした例

    Faceクラスを使った2つの顔模様の描画

    class_2faces_simple_scale

    Code

    演習3

    例を参考に,自分なりの顔模様の描画に挑戦する. 余裕があればオブジェクトを追加生成し,レイアウトする.

    以下,作例プログラム(ここまでは凝らなくてよい)

    class_2faces_chiikawa

    Code

    配列で複数のオブジェクトを作成する.

    オブジェクト用の配列を用意することで大量のオブジェクトを生成できる. 配列関連は初めから記述するのは大変なので,コピー&ペーストして作業を行えればよい.

    Circleクラスを使った100個の円の描画

    class_circles_array

    Code

    オブジェクト配列の用意

    class_circle_array

    オブジェクトの生成

    class_circle_array_new

    例1

    Faceクラスを使った20個の顔の描画

    class_faces_array20

    Code

    例2

    Faceクラスを使った16個の顔を並べる描画

    class_faces_array16

    Code

    演習4

    演習3で作成した顔の模様を,オブジェクト配列を使って複数描画するプログラムを作成する.

    以下,作例プログラム

    class_faces_chiikawa_array40

    Code

    メソッドで図形を更新する.

    Circleクラスを使ったアニメーション

    class_circle_update

    Code

    更新用メソッド

    class_circle_update_method

    更新用メソッドの呼び出し

    class_circle_update_call

    例1

    Faceクラスを使ったアニメーション

    class_face_update

    Code

    例2

    例1をもとにスケール値を変化させるアニメーション

    class_circle_update_scale

    Code

    例3

    例2のFaceクラスを用いた20個の顔のアニメーション

    class_faces_update_

    Code

    例4

    自由落下するFaceクラスによるアニメーション

    class_face_update_freefall

    Code

    例5

    例4のFaceクラスを用いた20個の顔のアニメーション

    class_faces_update_freefall

    Code

    演習5

    更新用メソッドを使用し,任意のアニメーションを作成する.

    以下,作例プログラム(ここまでは凝らなくてよい)

    6匹の犬が走るアニメーション

    class_sample_dogs_run

    Code

    オブジェクト指向プログラミングの利点

    第13回:課題4講評&授業総括

    授業の本来の目的

    以下の目的が達成されたか.

    授業で学んだ技術

    以下のプログラム技術の基礎を理解できたか.

    手続記述型(プロシージャル)造形手法

    形や動きを生成するためのアイデア(生成規則)によって対象物を表現する方法

    recursive_tree_finishrecursive_kochCurve_example

    未整理プログラム置き場

    オブジェクト指向分析・設計

    複数のクラスを用いた,より複雑なプログラムの設計を行う際は,オブジェクト指向的な設計能力が求められる. 実装(プログラミング)の前準備だが,重要な工程

    クラスの設計

    重要な考え方,心構え

    クラスの設計を行う際に重要な考え方,心構えは従来のエンジニア的な思考とは異なる.

    求められる資質

    物事の構造や本質を見抜き,洞察する能力 > 旧来のエンジニアリング知識,コーディング能力

    つまり,誰でもクラスを用いたプログラミング能力が向上する可能性がある.

    クラス

    クラスとは

    クラスの構造

    「Human」クラスの定義の例

    Code
     関数クラス
    概念関数
       
       

     

    クラスを作る作業の流れ

     

    実行時の動き

    「Human」クラスの実行の例

    Code

    クラスによるプログラミングのポイント

    フィールド

    演習1

    コンストラクタ

    演習2

    メソッド

    演習3

    クラスの定義

    class

    クラスの要素

    クラスは以下の要素で構成される

    「Human」クラスの定義の例

    class_youso

    このように,クラスの持つデータや関数は特別な呼称となっている. 主なプログラミング言語別の呼称は下の表のとおり.

    クラスの持つ要素JavaC#C++
    データ(変数や配列)フィールドフィールドメンバ変数
    関数メソッドメソッドメンバ関数

    ProcessingはJavaをベースとしているので,本授業ではJava準拠の呼称を用いる.

    クラスの定義

    構文

    クラス名は一文字目を必ず大文字にする必要がある.

    Code

    フィールド

    Code

    従来の変数や配列の宣言文と同様の記述方法.

    コンストラクタ

    クラス特有のため,少し独特の記述方法.

    Code

    メソッド

    Code

    クラスを使用する

    クラスの定義後,クラスを使用するには以下のステップへ経る必要がある.

    「Human」クラスの実行の例

    class_instance_works

    インスタンスの宣言

    前述の通りクラスは「型」であるため,クラスを使うにはクラスのインスタンス(実体)を作成する必要がある. 基本的には関数ブロックの外(プログラムの最初)に記述する.

    構文

    Code

    構文(配列)

    インスタンスを複数作成する場合は,配列形式で宣言すると便利.

    Code

    インスタンス名は任意の名前を付けることができる.

    「Human」クラスのインスタンスの宣言

    Code
    Code

    インスタンスの生成

    基本的にはsetup関数内に記述する.

    構文

    Code

    「Human」クラスのインスタンスの生成

    Code

    引数の170, 60は,身長と体重の初期値となる.

    インスタンスのコール

    基本的にはdraw関数内に記述する.

    構文

    Code

    「Human」クラスのメソッドのコール

    Code

    「Human」クラスを使った,年齢を重ねた人のバイオデータのアニメーション.

    class_biodata

    Code

    https://processing.org/tutorials/objects/ https://docs.oracle.com/javase/tutorial/java/concepts/index.html

     

    演習

    直前の「Human」クラスのプログラムを元に,「Human」クラスにバイオデータ(フィールド)を追加し,さらにコンソールに表示されるように変更を加える.

    追加するフィールドや,grow()メソッドによる更新式は自由.

    追加するバイオデータの例

    演習時間:10分程度

     

    クラスを使った描画

    クラスの設計は自由だが,描画を行うための典型的な設計の仕方を紹介する. まず,以下のようにメソッドを設計する.

    これらのメソッドに必要なフィールドを逐次追加する.

    つまり,以下ようなテンプレートになる.

    Code

    「Car」クラスを使った車のアニメーション

    class_example_car

    Code

     

    演習

    概要

    class_face_draw_clear

    1. setup関数を用意する.

    Code

    2. Faceクラス定義の枠を作る.

    「Face」の一文字目は大文字であることに注意

    Code

    3. フィールドを宣言する.

    顔ごとに個性が現れるデータを変数として宣言する.

    本来は入念に設計する必要があるが,今回は割愛.

    Code

    4. コンストラクタの枠を作成する.

    コンストラクタはフィールドを初期化するための特別なメソッド.

    Code

    5. コンストラクタを定義する.

    コンストラクタの中でフィールドをランダム値で初期化します.

    Code

    6. テスト用Faceインスタンスを作成する.

    テスト用なので「faceTest」という名前

    Code

    7. Faceインスタンスを初期化する.

    Code

    8. 描画のためのメソッドの枠を作成する.

    「draw」という名前でFaceクラスにメソッドを定義する. ブロック内の命令は空のまま

    Code

    9. drawメソッドをコールする

    setup()の中でテスト用インスタンスのメソッドをコールする. また,顔を画面中心に描画するために座標変換命令も追加します.

    Code

    10. drawメソッドに描画命令を追加する.

    drawメソッドの中でフィールドの変数を使い,描画を行う.

    Code

    class_face_first_draw

    11. インスタンスを4つ作成する

    1. 以下の2つの文はテスト用だったので削除します.

      • Face faceTest; // テスト用Faceインスタンスを作成

      • translate(width/2,height/2);

    2. Faceクラスのインスタンス配列を作成します.

      • 配列名: faces

      • 要素数: 4

    ※この段階ではエラーでプログラムは未だ実行できません.

    Code

    12. インスタンスの初期化を書き換える

    4つのインスタンスは配列に格納されているので,初期化の記述も書き換えましょう. 配列の初期化方法を思い出してください.

    ※この段階ではエラーでプログラムは未だ実行できません.

    Code

    13. 描画メソッドのコールを書き換える

    Code

    実行すると,画面左上に4つの顔が重なって表示されてしまう.

    14. 4つのインスタンスを並べて表示する

    Faceインスタンスの描画命令周りに座標変換を使い,並べて表示するよう変更します.

    Code

    class_face_draw_clear

     

    クラスファイルの分割

    演習

    演習を通して以下のプログラムをクラスファイルに分割してみましょう.

    「Car」クラスを使った車のアニメーション(前述と同じ)

    Code
    1. (分割する前の)スケッチを保存する

    class_divide_first_save

    1. タブの横の「▽」をクリック

    class_divide_click_tab

    1. 新規タブを選択

    class_divide_new_tab

    1. 新しく作成するクラス用のファイル名を入力

      • クラスをファイルにする場合には,ファイル名は必ずクラス名と同じにしなければならない.

      • この例では「Car」

    class_divide_file_name

    1. 新しく作った空のタブが開かれる

    class_divide_file_created

    1. ここにクラス定義の記述を追加する. Car_drive.pde(メインプログラム)に元々記述していたクラス定義は削除する.

    class_divide_file_paste

    1. ファイル分割後のディレクトリは以下のようになる

      • スケッチフォルダ名「Car_drive」と同名の「Car_drive.pde」がメインプログラムファイルとなる

        • setup関数やdraw関数を記述する.

      • 「Car.pde」がクラスファイル

        • Carクラスのクラス定義を記述する.

    class_divide_directry

     

    クラスによる高度な描画

    複数の犬が走るアニメーション

    class_sample_dogs_run

    Dog_run.pde (メインプログラム)

    Code

    Dog.pde(クラスファイル)

    Code

     

    演習

    自由にクラスを使った静止画描画プログラムを作ってみましょう. クラスを使った課題がないため,ここで試行錯誤してもらうのが狙い. 時間内に完成する必要はない.

    演習時間:20分程度

    以下のテンプレートを使うのもよい.

    正方形と円を描画するクラスをランダムな位置に配置するプログラム

    Code

    class_jiyuu_enshuu_template

    作例

    class_dango_sakurei

    Code

     

    第11回:ライブラリの使用

    ライブラリ(Libraries)とは

    便利なプログラムの集まりをまとめ,他のプログラムで再利用できるようにしたもの

    Processingのライブラリは以下の二種類に分けられる

    https://processing.org/reference/libraries/

    インストールとインポート

    Contributed Librariesを使用するには,事前にインストールする必要があります. Core Librariesを使用する際は,「1.ライブラリのインストール」の手順はスキップできます.

    1. ライブラリのインストール

      • 「スケッチ 」> 「ライブラリをインポート」 > 「ライブラリを追加」

        library_tsuika

      • 「Contribution Manager」から,ライブラリを検索

        library_install_name

      • インストールしたいライブラリを選択し,インストール開始

        library_install_start

     

    1. ライブラリのインポート

      • 「スケッチ」メニュー > 「ライブラリをインポート」 > インポートしたいライブラリを選択

      • 上記を選択すると,プログラムの一行目にimport ライブラリ名.*;の一文が追加される.

        library_install_import

     

    https://processing.org/reference/libraries/

    第11回:インタラクション

    インタラクションとは

    相互作用のこと. ここでは,ヒューマンコンピュータインタラクション( Human-Computer Interaction )のことを指す. 本来は人とコンピュータの相互作用の仕組みを探求する大きな研究分野.

    この章では,ヒューマンコンピュータインタラクションにおける基礎として,マウスやキーボードによる入力方法を学ぶ.

    マウス

    マウスポインタの座標値

    mouseX

    mouseY

    マウスポインタの位置に円を描画する

    Code

    interactin_mouse_xy

    https://processing.org/reference/mouseX.html https://processing.org/reference/mouseY.html

    マウスポインタの座標値(前フレーム)

    pmouseX

    pmouseY

    直前の描画フレームにおけるマウスポインタの座標値が格納されている. マウスポインタを素早く動かすと,mouseX, mouseY の値との差が大きくなる. pmousX, pmouseYとの差から,マウスポインタの移動の速さ方向を取得できる.

    例1

    マウスポインタの移動の軌跡の描画.

    Code

    interactin_pmouse_xy

    例2

    マウスポインタに少し遅れて追従する円の描画.

    Code

    interaction_pmouse_xy_circle

    https://processing.org/reference/pmouseX.html https://processing.org/reference/pmouseY.html

    マウスボタンが押されているか

    mousePressed

    いずれかのマウスボタンが押されているか,押されていないかの情報がブール値( true, false )で格納されている.

    マウスボタンが押されている間は継続的にtrueとなる.

    マウスボタンを押し続けると色が変わる矩形の描画

    Code

    interaction_pressed_fade

    https://processing.org/reference/mousePressed.html

    押されているマウスボタンの種類

    mouseButton

    押されたマウスボタンの種類に応じ,LEFT, RIGHT, CENTERのいずれかの値が格納される. mousePressedと組み合わせて使用することが多い. mouseButtonの値は,マウスの状態が変化する(ポインタが移動するorマウスボタンが押される)まで残る点に留意.

    例1

    マウスボタンの種類に応じ,対応する矩形の色を変える.

    Code

    interaction_mouseButton

    https://processing.org/reference/mouseButton.html https://processing.org/tutorials/interactivity

    例2

    簡易的なキャンバス

    Code

    interaction_canvas_simple

    演習1

    例2を自由にアレンジしてみましょう

    演習時間:8分程度

    作例

    interaction_canvas_sakurei

     

    応用例

    再帰呼び出し-コッホ曲線のサンプルの雪の結晶を,左クリックしたときのポインタ位置に描画する.

    Code

    interaction_kochcurve_ouyou

    キーボード

    キーが押されているか

    keyPressed

    キーが押されているか,押されていないかの情報がブール値(true or false)で格納されている.

    いずれかのキーを押し続けると色が変わる矩形の描画

    Code

    interaction_key_pressed

    押されたキーの種類

    key

    直前に使用されたキーの値(英数字)が格納される. 英数字以外の特別なキー(矢印,Alt, Ctrl, Shift など )が使用された場合,CODEDの値が格納される.

    例1

    押したキーのテキスト描画を行う

    Code

    interaction_key

    例2

    WASBキーにより円を移動させる.

    Code

    interaction_key_circle

    特殊なキーの取得

    keyCode

    アロー(矢印)キーや英数字以外の特別なキーが押されると,押されたキーの値が格納される.

    例1

    押したアロー(矢印)キーの方向に円を移動させる. ※見た目は一つ前の例と同じ

    Code

    interaction_key_circle

    例2

    押したアロー(矢印)キーの方向にテキストを移動させ,移動方向に対応したテキストを描画する.

    Code

    interaction_keycode

     

    演習2

    以下のプログラムを自由にアレンジしてみましょう.

    演習時間:8分程度

    テキストを描画する簡易キャンバス

    Code

    interaction_key_text_canvas

    作例

    形式は2種類に減らし,ホイールボタンで消去.

    interaction_key_text_canvas_sakurei

     

    応用例

    上下に跳ねるアニメーションをする円をアローキーで左右に移動させる.

    Code

    interaction_key_circle_anim

    イベント

    マウスやキーボード入力のような特定の出来事(イベント)が起こった際にコールされるイベント関数を定義することができる. イベント関数と,イベント関数をコールするイベントの対応は下表のとおり.

    イベント関数名イベント
    mouseClicked()マウスボタンがクリックされた時
    mousePressed()マウスボタンが押された時
    mouseReleased()マウスボタンが離された時
    mouseDragged()マウスドラッグが行われている時
    mouseMoved()マウスが動かされている時

    Processingにおいては,上表のように特定の名前の関数を定義することで,イベントが起きたときに対応するイベント関数のブロック文が実行される

    Code

    イベント関数を用いることで,入力処理をsetup()draw()から分割し独立させることができ,メインの描画プログラムがスマートになる. ただし,イベント関数に記述する命令は主にグローバル変数の更新式であり,描画命令を記述することは推奨しない draw()でスクリーンのリフレッシュを行うと,イベント関数で実行された描画命令は1フレームしか描画されないため.

     

    マウスイベント

    マウスのいずれかの入力が行われた時にコールされる関数.

    マウスボタンがクリックされた時

    mouseClicked()

    マウスボタンが押され,離された時1度だけコールされる関数.

    マウスボタンがクリックされる毎に矩形の白黒を切り替える.

    Code

    interaction_mouseClicked

    https://processing.org/reference/mouseClicked_.html

    マウスボタンが押された時

    mousePressed()

    マウスボタンが押された時に1度だけコールされる関数. 押され続けた時の処理はmousePressedが適当.

    https://processing.org/reference/mousePressed_.html

    マウスボタンが離された時

    mouseReleased()

    マウスボタンが離された時に1度だけコールされる関数.

    https://processing.org/reference/mouseReleased_.html

    マウスを押したままポインタを動かし,離すとその間の線を描画する.

    Code

    interaction_mousepressed_released

    マウスドラッグが行われた時

    mouseDragged()

    マウスボタンが押された状態でポインタが動かされている時に継続的にコールされる関数.

    例1

    マウスをドラッグすると矩形のグレー値が5ずつ増える.

    Code

    interaction_mouseDragged

    例2

    マウスをドラッグするとポインタの座標に円が追従する.

    Code

    interaction_mouseDragged_tsuiju

    https://processing.org/reference/mouseDragged_.html

    マウスポインタが動いている間に処理を行う.

    mouseMoved()

    マウスポインタが動かされており,かつボタンが押されていない時に継続的にコールされる関数.

    https://processing.org/reference/mouseMoved_.html

    演習3

    キーイベント

    キーボードのいずれかのキー入力が行われた時にコールされる関数.

    キーが押された時

    keyPressed()

    いずれかのキー押されている時に継続的にコールされる関数.

    いずれかのキーが押される毎に線が横に移動する.

    Code

    interaction_keypressed_line

    https://processing.org/reference/keyPressed_.html

    キーが離された時

    いずれかのキー離された時に一度だけコールされる関数.

    キーを押している間に円の大きさを大きくし,キーが離された瞬間に円の大きさをリセットする.

    Code

    interaction_keyreleased_circle

    https://processing.org/reference/keyReleased_.html

    GUI

    概要

    Graphical User Interface コンピュータの画面上に表示されるグラフィックスを元に操作を行うインターフェースのこと. 基本の入力(マウスやキーボード)で実現するのは難しいので,ライブラリを用いる.

    必要なライブラリ

    数種類あるが,ここでは日本語ドキュメントが豊富なControlP5を使用する. ライブラリ名:ControlP5 Contributed libraries(インストールの必要あり)

    導入方法

    1. ライブラリのインストール

      • 「スケッチ 」> 「ライブラリをインポート」 > 「ライブラリを追加」

        interaction_gui_lib_install01

      • 「Contribution Manager」から,ライブラリを検索

        検索窓にControlP5を入力してフィルタリング

        interaction_gui_lib_install02

      • ライブラリを選択後,Installボタンをクリックしインストール開始

        interaction_gui_lib_install03

    1. ライブラリのインポート

      • 「スケッチ」メニュー > 「ライブラリをインポート」 > ControlP5を選択

        interaction_gui_lib_import01

      • 上記を選択すると,プログラムの一行目にimport ライブラリ名.*;の一文が追加される.

        interaction_gui_lib_import02

    ControlP5を使う流れ

    クラスの概念を理解していないと難しいので,完全に理解する必要はありません.

    1. GUIのすべてのパーツを管理するControlP5オブジェクトを作成する.

      ControlP5 cp5;

    2. GUIパーツを作成する. パーツの種類によって宣言の型が異なる

      Code
    3. ControlP5を初期化する.

      Code
    4. ControlP5オブジェクトにGUIパーツを追加する. ※見やすいように改行をしている. パーツの種類によって構文が異なる.

      • スライダー

        Code
      • スライダー(2D)

        Code
      • トグルスイッチ

        Code
      • カラーホイール

        Code
    5. GUIパーツから値を取得する.

      スライダーの例

      Code

    具体的な使い方は次の項を参照のこと.

    GUIパーツ別の実装方法

    スライダー

    1つのパラメータを制御できる.

    例1

    スライダーで矩形の色を変更する.

    Code

    library_gui_slider_single

    例2

    2つのスライダーで矩形の色と大きさを変更する.

    Code

    library_gui_slider_double

    2Dスライダー

    2つのパラメータを制御できる.

    2Dスライダーで矩形の色と大きさを変更する.

    Code

    library_gui_2dslider

    トグルスイッチ(Toggle)

    スイッチのように,オンかオフかの2値(true, false)を取得できる.

    トグルスイッチにより,矩形の移動アニメーションのオンオフを行う.

    Code

    library_gui_toggle

    カラーホイール(ColorWheel)

    3つのカラー値をコントロールできる.

    カラーホイールで矩形のRGB値を変更する.

    Code

    library_gui_colorwheel

    キャプチャー

    概要

    コンピューターに接続したキャプチャーデバイス(カメラ)からビデオデータを取得し,Processing上で再生する.

    必要なライブラリ

    対応デバイス

    USB Cameras, IEEE 1394 (Firewire) Cameras

    導入方法

    1. キャプチャーデバイス(USBカメラ)をコンピューターに接続する.

      • コンピュータ内蔵カメラの場合は不要

    2. 以下のプログラムをProcessingで実行

    Code
    1. 映像が表示されなかった場合,以下のコンソールの表示を確認 使用したいカメラの要素番号(cameras[要素番号])を確認する.

    library_capture_console

    1. 使用したいカメラの要素番号をキャプチャー初期化時に指定するよう,プログラムを書き換える.

      このサンプルの場合,HD Pro Webcam C920を使いたいので,cameras[1]

      library_capture_rewrite

    2. 実行して正しくキャプチャーできているか確認する

    https://processing.org/reference/libraries/video/Capture.html

     

    カメラ画像のピクセル情報を取得してモザイク状に描画する.

    Code

    library_capture_sample_ss

     

    デバッグ

    デバッグとは

    デバッガ

    プロセッシング デバッガ

    デバッガの有効と無効の切り替え

    debugger_icon

    ブレークポイントで止まる

    デバッガが有効にされている間は,プログラムの実行は必ずブレークポイントが設定されている行で一時停止する. デバッグを行う上で,この操作が基本で起点となる.

    ブレークポイントの設定方法

    ブレークポイントの設定はデバッガが有効にされている間にしか行えないことに注意.

    設定方法は3つある

    ブレークポイントが設定された行は以下のように行番号の表示が変化する.

    debugger_break_point_enable

    ブレークポイントの削除方法

    ブレークポイントが設定されている行にて,ブレークポイントの設定と同様の操作を行うとブレークポイントを削除できる

    変数ウィンドウ

    デバッガが有効な間にプログラムを実行すると,ブレークポイントが設定されているすべての行でプログラムが一時停止する.

    一時停止中に「Variables」という別ウィンドウに現在の変数の値が表示される.

    debugger_variables_plain

    ステップ

    一時停止中にステップアイコンをクリックすると,現在一時停止している行が実行され,次の行でプログラムが一時停止する. 一行ずつプログラムを進めることができる.

    通常のステップ以外にも,ステップイン,ステップアウトという機能もある.

    debugger_step_icon

    ステップイン

    関数が含まれる行において,ステップインを行うと,関数の中にステップを行う 通常のステップは,関数を含む行から次の行にプログラムの実行を進めるのみ. 関数内のプログラムの実行を詳細に観察したい場合に用いる.

    ステップアウト

    現在一時停止している位置が関数の中であれば,ステップアウトは関数の呼び出し元に処理を移す ステップインで関数内にステップを進めた後に,関数の呼び出し元に処理を戻す場合などに用いる.

    debugger_step_variation

    続行

    一時停止中に続行アイコンをクリックすると,現在一時停止している行からプログラム実行が再開される. 次のブレークポイントまでプログラムは停止しない.

    debugger_continue_icon

    停止

    一時停止中に停止アイコンをクリックすると,プログラムの実行を終了できる. デバッガの使用を終了し,デバッガを無効にしたい場合などに使用する.

    debugger_stop_icon

    コンソールへの出力

    print()

    構文

    文字列はダブルクォーテーション「"」で囲むこと

    Code
    Code
    Code
    改行を含めたい場合
    Code

    文字列をコンソールに表示する
    Code

    hello_processing

    数値をコンソールに表示する
    Code

    print_values

    数値と文字列をつなげて表示する
    Code

    print_values_strings

     

    演習1

    以下の出力を行うプログラムを書いてみましょう. ただし,数(1,2,3)は文字列ではなく数値としてプログラムに記述すること.(""で囲まない)

    1+2=3

    表示ウィンドウの画像を保存する.

    save()

    構文

    save( “ファイル名.拡張子” )

    説明

    Code

    https://processing.org/reference/save_.html

    動画を保存する.

    saveFrame()

    アニメーションのような連続した複数の画像出力することができる.

    構文1

    Code

    この構文では,TIFF (.tif) 形式のファイルが出力される.

    draw()ブロックの末尾に記述する.

    Code

    export_anim_noparams

    TIFFフォーマットの連番が付いた画像ファイルが保存される.

    構文2

    画像のフォーマットやファイル名を変更したい場合は,こちらの構文を用いる.

    Code

    ファイル名には複数のハッシュマークを記述する必要がある.

    ハッシュマーク

    #

    連番を指定するためにファイル名の指定にハッシュマークを含める必要がある. ハッシュマークがフレーム番号に置き換えられる. ハッシュマークの#数でフレーム番号の最大桁数を指定することができる.

    例1

    Code

    例2

    Code

    フレーム区間を指定して保存する.

    例えば,「20フレーム目から40フレーム目の区間を出力したい」という時がある.

    export_anim_selected_time

    frameCount

    プログラムを実行してから,現在の描画フレームの番号を取得するシステム変数.

    frameCountを使って以下のようにif文を用いることで,指定した2つのフレーム番号間だけ出力を行うことができる.

    Code

     

    フォルダを指定して保存する.

    画像や動画を保存する際,ファイル名にフォルダ(ディレクトリ)名を記述することで,出力するフォルダを指定できる. ファイルやディレクトリ間はスラッシュ/で区切る.

    Code
    Code

    Code

    export_anim_directory

    特に動画の保存等は,複数の出力ファイルを別フォルダにまとめることができるので活用したい.

    https://processing.org/reference/saveFrame_.html

    PDFへ出力

    方法

    1. ライブラリのインポート

      • (日本語)「スケッチ」メニュー > 「ライブラリをインポート」 > 「PDF Export」を選択

      • (英語版)「Sketch」メニュー > 「import Library」 > 「PDF Export」を選択

    pdf_01

    上記を選択すると,プログラムの一行目にimport processing.pdf.*;が追加される. メニューを使わず,直に入力も可能.

    pdf_02

    1. size()の記述を変更する. 以下のような構文に変更する.

      Code

       

    pdf_03

    1. プログラム末尾にexit();を追加. Activeモードを使用中ならsetup()ブロックの末尾に記述する.

    pdf_04

    1. プログラムを実行すると,pdfファイルが出力される. この時,表示ウィンドウは表示されない.

    pdf_05

    アプリケーションとして出力する.

    Processing で作成したプログラムをアプリケーションとして出力し,Processingが不要な汎用のアプリケーションとして配布することができる.

    1. 「ファイル」 > 「アプリケーションとしてエクスポート」を選択

      export_app_step01

    2. オプションを選んでエクスポート

      export_app_step02

      • フルスクリーンを止めたい時は,「フルスクリーン」 > 「プレゼンテーションモード」のチェックを外す

      • Mac OS X 用に出力する場合,「プラットフォーム」 > 「Max OS X」にチェックを入れる

      • Windows の場合,「Javaの埋め込み」にチェックを入れておいたほうが無難.

    3. 出力フォルダ

      Winsowsの場合,以下のようにフォルダが出力される.

       

      export_app_step03

      動作させるOSが64bitか32bitかで,使用するフォルダは異なる. 昨今のOSはほぼ64bitなので,こちらを用いることを前提とする. 「application.windows64」フォルダの中身が全て必要であるので,配布などを行う場合,このフォルダごと配布する.(フォルダのリネームは可)

    4. 実行ファイル

      Windowsの場合,以下の場所に実行ファイルが格納されている.

      「application.windows64」 > ファイル名.exe

      これを通常のアプリケーションのようにダブルクリックして実行する.

    再帰関数を使った描画基礎

    描画命令を記述する位置

    「再帰関数の呼び出し-例2」のプログラムに描画命令を加える場合を考える. 以下,変更を加える前のプログラム.

    Code

    recursive_divide_console

    このプログラムに描画命令を加える位置は下図の通り.(print()命令を記述していた部分)

    recursive_draw_add_place

    上図のように,再帰呼び出しを終了させるif文の前に記述するのが一般的.

    描画命令の記述の仕方

    仮引数fValueを用いて描画命令を記述することになる. 再帰呼び出しの度に仮引数fValueの値は2分の1に変化している.

    この特性を使って,描画領域を再帰的に分割するプログラムを記述できる.

    Code

    recursive_draw_add_divide

    このプログラムでは,矩形の横幅の大きさの指定に,仮引数fValueを用いている.

    さらに命令を追加する.

    下のプログラムではスクリーンサイズを200×100,塗り色の指定を加えている.

    Code

    recursive_draw_add_divide_ad

    演習3

    正方形を再帰的に4分割する再帰関数を定義する.

    recursive_4squares_divided

    1.ウィンドウを表示する.

    Activeモードでウィンドウを表示させるところまで記述しましょう. ※静止画なのでdraw()は不要

    Code

    2. 再帰関数定義を準備する.

    void関数draw4Squares()を定義しましょう.

    Code

    仮引数fSizeこれから分割する領域全体の大きさの情報を表す.

    3. 再帰関数を呼び出す.

    描画結果がいち早く確認できるよう,再帰関数の呼び出しを記述してしまいましょう. setup()に以下の処理を追加しましょう.

    Code

    この引数400が再帰呼び出しにより,2分の1に分割されていくことを念頭に置いておく.

    4. 3つの正方形を描画する.

    void関数draw4Squares()に正方形の描画命令を追加する. 下図を参考に,仮引数fSizeを用い,右上,左下,右下に3つの正方形を描画する.(左上は空白)

    recursive_4squares_divided_02

    Code

    recursive_4squares_divided_01

    この描画を再帰呼び出しにより繰り返すことになる.

    5. 再帰を続行するif文を記述する.

    void関数draw4Squares()の最後に以下のif文と空のブロックを追加する.

    Code

    再帰の続行条件をfSize > 4としたのは,分割する領域の大きさが4以下の場合,それ以上分割しても視覚的には無意味であるため.

    6.再帰呼び出しを記述する.

    ステップ5.で追加したif文のブロックに,以下の再帰呼び出しを記述しましょう.

    Code

    recursive_4squares_divided

    この再帰呼び出しによって,左上の正方形のエリアに再帰的に描画が行われる.

    右下に再帰的に描画を行いたい場合,以下のように平行移動の命令を追加する必要がある.

    Code

    recursive_4squares_divided_03

     

    複数の引数をもつ再帰呼び出し

    再帰関数の引数を複数にすると難易度が上がるが,再帰による描画の表現の幅が広がる.

    例えば,以下のような再帰関数.

    Code

    演習4

    螺旋状の連続した線を再帰呼び出しで描画する.

    recursive_rasen_lines

    1.ウィンドウを表示する.

    Activeモードでウィンドウを表示させるところまで記述する. ※静止画なのでdraw()は不要

    Code

    2. 再帰関数定義を準備する.

    void関数drawLines()を定義する.

    Code

    仮引数fLength線の長さの情報を表す.

    3. 最初の再帰関数の呼び出しを記述する.

    描画結果がいち早く確認できるよう,再帰関数の呼び出しを記述する.

    Code

    実引数160は,最初の線の長さの情報をdrawLines()に渡す.

    4. 再帰呼び出しを記述する.

    下図のように,最初の線の長さ160が再帰呼び出しの度に0.85倍されていくように,記述を行う.

    recursive_rasen_lines_length

    drawLines()に,以下のように再帰呼び出しを記述する.

    Code

    この段階では,描画が行われていない.

    5. 線描画命令を記述する.

    drawLines()に,以下のように線の描画命令を記述する.

    Code

    recursive_rasen_lines_01

    現状では再帰的に線を描画するための情報が足りていない. これからしばらくは,必要となる変数や仮引数の用意を行っていく.

    6. 角度を受け取る仮引数を追加する.

    下図のように,再帰呼び出しの度に線が30°回転されていく.

    recursive_rasen_lines_degree

    下のように,角度を示す仮引数fDegreeを追加し,関連する関数呼び出しの記述も書き換える.

    Code

    7. 線を開始する点の座標値を受け取る仮引数を追加する.

    これまでの段階で,線の長さと角度の情報が得られたが,線を開始する点の情報が不足している. 下図のように,最終的には4つの引数が必要となる.

    recursive_rasen_lines_params

    下のように仮引数fBeginX, fBeginYを追加し,関連する記述も書き換える.

    Code

    再帰呼び出しにおいて,本来なら次の線の開始点のXY座標値を渡す必要があるが,一時的にfBeginX, fBeginYをそのまま渡している.

    8. 線が終了する点の座標を求める.

    line()を用いて描画を行うには,線を開始する点のXY座標値に加え,線を終了する点のXY座標値が必要となる. ある点から伸びる線のXY成分値は三角関数を用いて下図のように算出することができ,これを元に必要なXY座標値が得られる.

    recursive_rasen_lines_endXY

    三角比

    ※演算と変数で学習済み

    triangle_func_def

    下のように記述し,線の終端の点のXY座標値をローカル変数fEndX, fEndYに代入する.

    Code

    線を開始する点の座標値fBeginX, fBeginYに,三角比の計算で得られた値を加えていることに留意. この段階で変数及び仮引数の準備が整ったので,以降はそれらを描画命令や再帰呼び出しに組み込んでいく.

    9. 描画命令や再帰呼び出しの書き換え.

    下のように,描画命令と再帰呼び出しを書き換える.

    Code

    recursive_rasen_lines_02

    線を終了する点の座標値fEndX, fEndYは,次の線における線を開始する点の座標値となるため,再帰呼び出しの引数として記述する.

    10. 描画を整える.

    下では,線の終端の円の描画や線の太さの設定などの記述を追加している.

    Code

    recursive_rasen_lines

     

    再帰呼び出しを複数回行う

    再帰呼び出しを複数回同時に行うことで,再帰を枝分かれさせることができる. より複雑な模様が生成できる.

    Code

     

    再帰void関数の定義

    再帰関数は関数の一種であるので,まず関数の定義を行う必要がある. 再帰関数の定義を記述したら,setup()draw()内で再帰関数をコールする.

    ここではvoid関数を用いた構文を学習する. 条件式の種類によっておおまかに二通りの構文に分けられる.

    構文1

    再帰呼び出しを続ける条件式を記述する構文

    Code

    構文2

    再帰呼び出しを終了する条件式を記述する構文

    Code

    上記の二通りの構文は,実は本質的には違いがあまり無い. 目的や好みに応じて構文を使い分ければよい. return文に抵抗があるなら構文1を推奨する.

    例1

    引数の値の回数だけ再帰呼び出しを行う再帰関数の定義.

    Code

    仮引数iCountから1を引いた値を,次の再帰呼び出しの際に実引数として渡している. 再帰の続行条件は,仮引数iCountが0より大きいこと.

    例2

    引数の値を2で割り,割った後の値を引数として再帰呼び出しを行う再帰関数

    Code

    仮引数fValueを2で割った値を,次の再帰呼び出しの際に実引数として渡している. 再帰の続行条件は,仮引数fValueが5より大きいこと.

     

    演習1

    下図の①,②に何を記述すればよいか考えてみましょう.

    再帰関数recursiveScale()の要件

    recursive_scale_quiz

    演習時間:1分程度

     

    再帰関数の呼び出し

    前述の例1で定義した再帰関数を使用したプログラムを元に,再帰呼び出しの流れを見ていく. 以下のプログラムでは,再帰関数recursiveCount()setup()から呼び出している.

    Code

    recursive_count_simple_console

    この再帰関数は結果として,最初に渡した実引数「4」の回数だけ再帰呼び出しを繰り返していることがわかる.

    最初の呼び出しの流れ

    1. setup()から関数recursiveCount(4)を呼び出す.

    print()命令は削除しています.

    recursive_step_01

    コールスタックとは,関数呼び出しの情報を保存したメモリ領域.  呼び出された関数は,それぞれの仮引数やローカル変数などのデータを保持している.

    2. 仮引数に値が渡される.

    recursive_step_01

    3. 条件式の評価.

    recursive_step_02

    4. recursiveCount( 3 )の呼び出し.

    recursive_step_03

    5. 仮引数に値が渡される.

    recursive_step_04

    6. 条件式の評価.

    recursive_step_05

    7. recursiveCount( 2 )の呼び出し.

    recursive_step_06

    8. 仮引数に値が渡される.

    recursive_step_07

    9. このような再帰呼び出しが,引数が0になるまで繰り返される.

    recursive_step_08

    10. recursiveCount( 0 ) の呼び出し.

    recursive_step_09

    11. 条件式の評価.

    条件式が偽となるため,if文のブロックは実行されない.

    recursive_step_10

    12. recursiveCount( 0 ) の終了.

    その後にも,recursiveCount( 0 )ブロックには特に命令が記述されていない.

    recursive_step_12

    13. 呼び出し元のrecursiveCount( 1 )へ戻る.

    recursiveCount( 0 ) の呼び出し元の位置はif文のブロック内.

    recursive_step_13

    14. recursiveCount( 1 )の終了.

    その後,recursiveCount( 1 )ブロックには特に命令が記述されていない.

    recursive_step_14

    15. 逆順にrecursiveCount()が終了していく.

    このように,呼び出された順番と逆順にrecursiveCount()が終了していく.

    recursive_step_15

    16. 最初の呼び出し元に戻る.

    recursive_step_16

    例3

    例2で定義した再帰関数recursiveDivide()setup()から実行した例.

    Code

    recursive_divide_console

    このような再帰関数は図形を分割して描画する等の表現に応用できる.

     

    演習2

    演習1と同じ再帰関数recursiveScale()を定義し,引数の値1を渡してsetup()から呼び出してみましょう. また,例3を参考にprint()命令を記述し,下図のようにコンソール出力を行いましょう.

    再帰関数recursiveScale()の要件(演習1と同じ)

    演習時間:4分

    recursive_scale_console

     

    返り値のある再帰関数の定義と呼び出し

    返り値のある関数を用いて再帰関数を定義することもできる. 本授業で用いるにはあまり適していないので,構文等は割愛する.

    例1

    1から始まり,ある数nまでの数の和を求める再帰関数.

    1+2+3+4+5++n
    Code

    例2

    例1の再帰関数を用い,1から始まり10までの数の和を求める.

    Code

    recursive_nsum_console

     

    return文

    関数が値を返すための命令文をreturn文という. 以下のような構文で具体的な値を返す.

    Code
    Code
    Code

    返り値のある関数による表現

    返り値のある関数の構文

    関数の定義は,返り値のある関数と返り値のないvoid関数で,多少異なる.

    Code

    引数は「,」区切りで複数記述でき,記述しない(0個)こともできる. 定義された関数のブロック内で,仮引数を用いて計算等を行う. また,return文という命令文で関数が返す値(返り値)を指定する.

    例1

    3つの引数を受け取り,それらの平均値を返す関数.

    Code

    func_calcAverage

    例2

    1つの引数を受け取り,その値を半径とした円の面積を返す関数.

    Code

    ###

    描画:返り値のある関数

    複雑な計算を行う処理を関数にまとめることができる.

    void関数の定義の方が使用頻度は高い.

    例1

    円の面積を元に,異なるアルファ値を持つ正円をランダム描画するアニメーション 円の面積が大きいほど,小さいアルファ値となる.

    Code

    func_circle_area_random_alpha

    例2

    ランダムな大きさの矩形の並列描画. 関数の定義の中で描画を行いつつ,値を返すこともできる.

    Code

    func_random_rects

    例2

    サイン波とコサイ波のアニメーション

    my_func_sample_wave

    Code

    if文で返り値を分岐させる

    if文などで条件分岐を行うと,return文を複数記述できる.

    2つの引数を受け取り,大きい方の値を返す関数.

    Code

    ただし,必ずいずれかのreturn が実行されるように記述しなければならない. 以下,不可な例

    Code

     

    演習2

    下図のような多角形描画行う関数を定義してみましょう.

    my_func_practice00_01

    下の手順を参考にしてください.

    1.ウィンドウを表示する.

    Activeモードでウィンドウを表示させるところまで記述しましょう.

    Code

    2. 矢印を描画する関数定義を準備する.

    void関数drawArrow()を定義しましょう.

    Code

    3.drawArrow()を画面中心でコールする.

    draw()に以下の記述を追加しましょう.

    Code

    4.矢印のプロポーション用グローバル変数を定義する.

    矢印の各プロポーションを以下のようにグローバル変数で定義し,初期値を入力してください. (アニメーションではなく,定数として用いる)

    Code

    それぞれのグローバル変数の値は,下図のように矢印各部の大きさに対応する.

    my_func_practice00_02

    Code

    5. 多角形描画を用いて矢印の描画を行う.

    多角形描画を使って矢印を描画する命令をdrawArrow関数に追加する.

    my_func_practice00_04

    Code

    6. 仮引数を元に座標変換を行う.

    今のままでは仮引数が使われていないので,これらを使って座標変換を行いましょう. 以下の記述をdrawArrow()に追加しましょう.

    my_func_practice00_05

    Code

    7. 座標変換のリセット

    実はステップ6のままでは,関数実行後も変換された座標系が残ったままである. 基本的には関数内で行った座標変換は,関数内で戻しておいた方がよい. drawArrow()に以下の記述を追加する.

    Code

    以上の手順で,drawArrow()という独自の矢印図形を描画する関数を作成することができた.

     

    演習3

    演習2のプログラムを元に,拡大縮小機能を追加し,drawArrow()を呼び出してレイアウトを行う.

    1. drawArrow()に拡大縮小用の引数を追加する.

    矢印の大きさを変更(拡大縮小)できるよう,以下のようにdrawArrow()を書きかえる.

    また,関数コールの記述を以下のように書き換える.

    Code

     

    Code

    2. 仮引数fScaleを用いて座標系を拡大縮小する.

    drawArrow()に以下の記述を追加する.

    my_func_practice01_06

    Code

    これでdrawArrow()は完成した.

    3. drawArrow()を使った様々な表現

    drawArrow()を使って色々な描画を試してみましょう. 静止画ならsetup()内,アニメーションさせたいならdraw()内で呼び出しましょう.

    また,以下の部分の数値を変更することで矢印のプロポーションを変更できる.

    Code
    作例1

    40°ずつ回転させながら描画する.

    draw()のみ記載

    Code

    my_func_practice01_02

    作例2

    円周上に並べる

    draw()のみ記載

    Code

    my_func_practice01_03

    作例3

    並進

    draw()のみ記載

    Code

    my_func_practice01_04

    作例4

    並進(拡大縮小あり)

    draw()のみ記載

    Code

    my_func_practice01_05

    作例5

    移動と跳ね返りアニメーション

    drawArrow()の関数定義以外を記載

    Code

    my_func_practice01_06

    関数から別の関数を呼び出す

    関数の中で別の関数を呼び出すことも可能. 詳しくは,後の「再帰」のセクションで.

    Code

     

    より高度な表現

    演習

    顔のような描画

    my_func_practice_simple_02

    1.setup(),draw()を記述

    Code

    2.顔を描画する関数を定義

    ブロック内の命令以外の枠だけ用意しましょう.

    Code

    3.drawFace関数をsetup()内で呼ぶ

    これで関数drawFace()は実行されるようになります.

    Code

    4.drawFace関数内に図形描画命令を追加

    drawFace()のブロック内にellipseやlineなどの命令を使い,思い思いに自由に顔を描いてみましょう. 座標原点がスクリーン中心に移動していることに注意.

    my_func_practice_simple_01

    Code

    5.仮引数を元に座標変換

    仮引数iX,iYは顔の座標の平行移動に使いたい. drawFace()の中で,ステップ4で作成した顔描画の前に,座標変換:平行を追加しましょう.

    この方法だとたくさんある図形描画の命令にひとつひとつ追加するより楽.

    Code

    6.座標系の保存・戻しを関数に追加

    ステップ5のように関数内での座標変換は便利だが,関数内で行った座標変換は関数内で戻しておくのが安全. 戻さない場合,プログラムの他の部分に影響がでる.

    以下のようにpushMatrix(), popMatrix()を追加しましょう.

    Code

    7.drawFace()を複数呼び出す

    まず,setup()内のtranslate()文はもう不要なので,削除しましょう. setup()内のdrawFace()呼び出しを,引数を変えながら複数書いてみましょう.

    余裕があれば,for文を使い,さらに大量に書いてみましょう.

    Code

    my_func_practice_simple_02

    第7回:ユーティリティ関数

    Processingにあらかじめ用意されている便利な関数をいくつか紹介する.

    日付

    現在の日,月,西暦を取得する.

    day()

    month()

    year()

    構文

    day() // 日(1 ~ 31) month() // 月(1 ~ 12) Year() // 西暦(2023~)

    Code

    https://processing.org/reference/day_.html

    https://processing.org/reference/month_.html

    https://processing.org/reference/year_.html

    フレーム単位の変化(※非関数)

    秒より小さい単位の変化のアニメーションは,フレーム単位の変化のアニメーションとして実現できる. この場合,時間を取得する関数は用いない. 例えば,「1秒周期で繰り返すアニメーション」は,現在のフレーム番号をグローバル変数として保存し,参照することで実現できる.

    演習1

    1秒で1回転する矩形のアニメーション

    util_anim_per_1rot_05

    以下の手順を参考にしてください.

    1. ウィンドウを表示する.

    Code

    2. 1秒で1回転する矩形の初期描画.

    draw()ブロックに以下の処理を記述する.

    Code

    util_anim_per_1rot_01

    3. 画面の中心に移動させる.

    draw()ブロックに以下の処理を記述する.

    Code

    util_anim_per_1rot_02

    これを回転させたい,rotate()を追加したいが,その前に回転アニメーション用のグローバル変数を追加する.

    4. 現在のフレーム番号を保存するグローバル変数を追加する.

    Code

    5. iFrameCurを用いて回転させる.

    Code

    util_anim_per_1rot_03

    6. 画面をリフレッシュさせる.

    Code

    util_anim_per_1rot_04

    どう見ても1秒で1回転していない. 現在のフレームレートは60なので,1秒間で60°しか回転していない 1秒間で360°回転させるには,毎フレーム回転させる必要がある. この割合はフレームレートによって変わる点に注意.

    7. フレーム毎の回転量を6倍にする.

    Code

    util_anim_per_1rot_05

    見た目はこれで完成だが,将来性を考え,フレーム番号を正しく0~59の間に収める処理を加える.

    8. 1秒経ったらフレーム番号を0に戻す.

    Code

     

    例1

    1秒間で画面を横切る矩形の描画

    Code

    util_anim_per_1translate

    例2

    1秒間で色相環を一周する矩形の描画

    Code

    util_anim_per_1_hue

    例3

    演習1を元に,秒とフレームをリンクさせた例

    ※関数を使用

    Code

    util_anim_per_1rot_second

    プログラムを開始してからの経過時間

    millis()

    プログラムを開始してからの現在の経過時間を,ミリ(千分の一)秒単位で取得できる. 少し難しいが,差分を取ることで細かいアニメーションに応用できる.

    構文

    Code

    ミリ秒単位で3種の時間を表示する

    Code

    millis

    https://processing.org/reference/millis_.html

     

    秒が変わるまでのミリ秒単位のアニメーション

    Code

    millis_arc

    変数のスコープ

    変数にはローカル変数とグローバル変数の二種類の変数がある.

    ローカル変数

    例1

    様々なローカル変数の宣言文

    Code
    Code
    Code

    例2

    for{}ブロック内にfor{}をネストした例

    Code

    例3

    for{}ブロック内にif{}をネストした例

    Code

    例4

    setup{}ブロック内にif{}をネストした例

    Code

    グローバル変数

    使い方

    Code

     

    2次元配列

    Code

    この記述は概念上は下図のようになる.

    concept04

     

    concept03

    このようなメモリ上での配置は直観的に理解しづらいので,概念図で理解したほうが好ましい.

     

    要素数の取得

    構文

    行の要素数の取得
    Code
    列の要素数の取得
    Code

    列の要素数を取得するには,形式上は行番号を指定する必要があるが, 通常は以下のように,0でよい.

    Code

    概念

    例えば以下の記述は,概念上は下図のようになる.

    Code

    array_two_length

    int型の行数が3,列数が4である2次元配列iArrayの行と列の要素数をコンソール出力する.

    Code

    array_two_length_console

    演習4

    int型の行数5,列数2である2次元配列iXYを宣言し,全ての要素を10で初期化するプログラムを書いてみましょう.

     

    宣言+初期化

    Code

    例1

    int型の行数4,列数2である2次元配列iXYの宣言と初期化.

    Code

    例2

    float型の行数3,列数4である2次元配列fRGBの宣言と初期化を行う. さらに配列を表状にコンソール出力する.

    Code

    array_float_rgb_console

    演習5

    int型の行数3,列数2である2次元配列iXYを宣言し,宣言と初期化を同時に行うプログラムを書いてみましょう.

    配列を使った描画

    配列を使い,プログラムを効率化できる場合がある. 使い方毎に以下にまとめる.

    ランダム値を配列に保存する.

    random()が返す値を配列に保存することで,同じ乱数の数列を繰り返し用いることができる.

    ランダムな線の長さをリストとして配列に保存し,回転対称の図を描画する.

    Code

    practive01_02

    配列に数列を代入し,描画に用いる.

    1. 配列の初期化の際,for文において任意の数列を代入するよう記述する.

    2. 描画の際,配列の要素番号によってパターンを選択する.

    例1

    10で始まり,10ずつ増える数列を配列に代入し, 配列の要素を昇順矩形を描画する.

    Code

    example01

    例2

    例1で用いた配列を再利用し,降順とランダムのパターンの描画を行った例.

    Code

    example02

    多次元配列

    int型の3次元配列の宣言文の例

    Code

    rgb_buffer

    ピクセル毎のRGB値を持つ3次元配列を使った描画.

    Code

    example04

     

    ブロック文のネスト

    ネストとは

    if-else のネストの例

    上記のフローチャートをコード化したものが下のプログラム.

    Code

    コメント無しだと以下のような形式.

    Code

    for文の中にif文を入れたネストの例

    例1

    一定の領域にのみランダムで点を描画する例.

    Code

    if_sample

    例2

    4つの領域へのランダム点描の例. for文とif-else文のネストを使っている.

    Code

    if_sample02

    演習9

    例2をベースに,下図のような5つの領域へのランダム点描を行うプログラムを作成してみましょう.

    flow_for_nest_5area_dots

     

    例3

    4つの領域へのランダム点描の例.(縦2×横2) for文と2重のif-else文のネストを使っている.

    Code

    if_nest

    例4

    if-else文を使った日の丸模様のランダム点描.

    Code

    if_else_flow_sample01

    for文の中にfor文を入れたネストの例

    例1

    ウィンドウの全てのピクセルに対して描画を行うfor文のネスト.

    Code

    例2

    ネストの中の繰り返し変数iXの値をコンソール出力する例.

    Code

    flow_for_nest_xy_console

    例3

    ネストの中の繰り返し変数iXiYの値をコンソール出力する例.

    Code

    flow_for_nest_xy_double_console

    処理の流れ
    1. 外側,内側のfor文の繰り返し用変数に初期値が代入される. 内側のブロック文が最初に実行される. flow_for_nest_xy_flow_00

    flow_for_nest_xy_console_00

    1. 内側のfor文が一巡する.(1巡目) コンソール出力のを見ると,変数iX値が1ずつ増えていることが確認できる.

      flow_for_nest_xy_flow_01

    flow_for_nest_xy_console_01

    1. 内側のfor文が終了し,次の文でコンソール出力を改行する.

      flow_for_nest_xy_flow_02

    flow_for_nest_xy_console_01_5

    1. 外側のfor文の変数の更新と条件式の評価が実行される. 変数iYが1に増える. flow_for_nest_xy_flow_03

    2. 内側のfor文の繰り返し用変数に初期値が代入される. 内側のブロック文が実行される.(2巡目開始) コンソール出力のを見ると,変数iY値が1に増えていることが確認できる.

      flow_for_nest_xy_flow_04

    flow_for_nest_xy_console_02

    1. 内側のfor文が一巡する.(2巡目)

      flow_for_nest_xy_flow_01

    flow_for_nest_xy_console_03

    以上のような処理を繰り返している.

     

    演習10

    例3のプログラムをコピーして,以下のようにコンソール出力がされるよう条件式を変更してみましょう.

    flow_for_nest_xy_console_practice

     

    例4

    ウィンドウに正円を並べて描画した例. 繰り返し変数の更新式がiY+=20iX+=20であることに注意.

    Code

    flow_circles_in_window

    例5

    グラデーションのカラーチャート(矩形)

    Code

    flow_for_nest_rects_graduation

    例6

    ネストの中のfor文で,複数の図形を回転させながら繰り返し描画を行う例.

    Code

    flow_for_nest_rects_falling

    演習11

    例6のプログラムに変更を加え,自由に花のような模様を作ってみましょう.

    flow_for_nest_falling_practice

    Code

    for文と変数を使った表現

    制御文とは

    フローチャート(流れ図)

    flow_chart

     

    条件式

    条件式とは

    hishigata

    構文

    2つの値or変数の間にスペースをはさみ,比較演算子(後述)を中に記述する.

    Code

    条件式の種類

    下表の条件を満たしたとき,条件式は真(true)を返し,満たさなければ偽(false)を返す.

    条件式比較演算子条件
    a < b<aがbより小さい
    a <= b<=aがb以下
    a > b>aがbより大きい
    a >= b>=aがbと等しいか大きい
    a == b==aとbが等しい
    a != b!=aがbが等しくない

     

    計算結果(式が返す値)

    条件を満たしたとき,式の結果は真(true)となり,そうでなければ偽(false)となる.

    例1

    条件式の計算結果をprint()する例

    Code

    flow_condition_print

    例2

    算術式と組み合わせた例. 変数iAが偶数ならtrue,奇数ならfalseの計算結果をprint()する.

    Code

    flow_condition_print_true

    処理の順序

    flow_condition_jouyozan

    例3

    変数の初期値に乱数を代入した例. 変数iRandom3の倍数ならtrue,そうでないならfalseの計算結果をprint()する.

    Code

    flow_condition_random_3baisuu

     

    https://processing.org/reference#control

     

    演習1

    int型の変数に乱数(0~100)を代入し,偶数ならtrue,奇数ならfalseの計算結果をコンソール出力する.

    flow_condition_random_even

    繰り返し

    for文

    構文

    Code

    変数の値をコンソール出力する処理を10回繰り返すfor文

    Code

    flow_for_console_10count

    処理の流れ
    1. 変数の宣言

    flow_for_console_10count_flow_01

    1. ブロック文の処理

    flow_for_console_10count_flow_02

    1. 変数の更新式

      この更新式でiIdxに1が加えられる.

    flow_for_console_10count_flow_03

    1. 条件式の評価

    flow_for_console_10count_flow_04

    1. 条件式の結果によって分岐

    flow_for_console_10count_flow_05

    https://processing.org/reference/for.html

     

    演習6

    (for文用の)変数の値をコンソール出力する処理を100回繰り返すfor文を書いてみましょう.

    flow_for_console_100count

     

    for文を使った描画

    乱数を使った繰り返し

    例1

    点をランダムな位置に400個描画する.

    Code

    flow_for_400dots

    例2

    位置,大きさ,色がランダムな円400個描画する例.

    Code

    merit_02

    演習7

    星空のような図の描画

    hoshizora_simple

    例3

    演習7の星空のような図の描画の作例.

    Code

    hoshizora

     

    X座標値0~ウィンドウ幅まで繰り返す

    例1

    繰り返し用変数iXを座標値として使用し,100個の点描画行った例.

    Code

    var_in_loop

    例2

    例4をシステム変数width,heightを用い,ウィンドウを可変にした例.

    Code

    flow_for_naname_line_width

    Y座標値0~ウィンドウ高まで繰り返す

    例1

    繰り返し用変数iYを座標値として使用し,ウィンドウ上部から下部まで水平線を繰り返し描画した例.

    Code

    flow_for_Yloop_lines

    例2

    例6を,線の間隔が5ピクセルになるよう変更した例.

    Code

    flow_for_Yloop_lines_interval

    降順で繰り返す

    下のコードのように書くことで,これまでの昇順と逆順である降順で繰り返すことも可能.

    Code
    Code

    演習8

    下図のような縦線の繰り返しを描画するプログラムを書いてみましょう.

    flow_for_border

     

    while文

    構文

    Code

    Code

    https://processing.org/reference/while.html

    int型変数へ代入する際の注意点

    calc_var_random_mismatch

    演習3

    ストライプ模様の描画の改良 以下のサンプルは,ウィンドウ左から右へ縦長の矩形を25個描画するプログラムである. ※繰り返し文を使用

    Code

    calv_var_practice3_original

    1. 矩形の色を決定している部分の右辺の代入文を改良してみましょう.

    Code

    未整理

    値とは

    数値の記述方法

    整数

    負の値を表現する際はハイフン「-」を先頭に記述する.

    -12

    -213

    1234

    2134567

    実数

    -12.3

    -213.45

    1234.567

    2134567.89

    プログラムにおける記述方法

    演算とは

    コンピュータにとっての計算のこと. 以下のような種類がある.

    演算をプログラム上で表す表現方法がである.

    本章では算術演算を表現する式について学習する.

    文と演算・変数

    命令文 (Imperative Statement)

    Code

    宣言文(Declarative Statement)

    宣言文という文も存在する.

    Code

    文を構成する要素

    文の例要素
    line( 0, 0, 0, a + 1 );
    line( 0, 0, 0, a + 1 );
    line( 0, 0, 0, a + 1 );変数
    line( 0, 0, 0, a + 1 );演算子
    line( 0, 0, 0, a + 1 );命令
    line( 0, 0, 0, a + 1 );

    何ができるのか

    triforce_graph

    Code

    算術式

    算術式とは

    四則演算

    a+baba×ba÷b

    四則演算を表す式

    計算種類
    足し算加算a + b
    引き算減算a - b
    かけ算乗算a * b
    割り算除算a / b

    算術式の文への組み込み

    左記に述べたように,式はそれだけでは機能しない. 文へ組み込む必要がある.

    主な組み込み方

    例1

    print()で,計算の答えをコンソールへ表示する.

    Code

    math_exp_console_sample

    例2

    Code

    math_exp_rects_sample

    除算(割り算)の注意点

    例1

    小数点以下まで算出される記述例.

    Code

    math_exp_shousuu_console_sample

    例2

    小数点以下が切り捨てられる記述例.

    Code

    math_exp_shousuu_console_sample_none

    剰余算

    演算子

    算数(演算記号)プログラム(演算子)記号の読み方日本語キーボードにおけるキーの場所の対応
    ÷%パーセントShift +「え」

    ある数値が偶数か奇数かをコンソールに表示する.

    Code

    math_exp_odd_even_console

    演習1

    以下の数式と同様の計算を行い,答えとなる値をコンソールに表示するプログラムを作成しましょう.

    (1.3×(4.2+5.3)÷2.5×(0.2×6)2.8)×3.9

    ヒント

     

    変数

    アルゴリズムとデータ構造

    1. アルゴリズム

      • 様々な命令を実行する手順

      • 本質的にはコンピュータ言語に依存しない.

    2. データ構造

      • プログラム実行中にメモリにデータを一時的に記憶する.

      • ストレージ(HDDやSSD)ではない.

    変数の要素

    変数は以下の要素で構成される,以降それぞれ詳細を説明する.

    double

    char

    宣言

    構文

    宣言のみ.

    Code

    宣言+初期値の代入

    Code

    例1

    Aという名前のint型の変数を宣言する.

    Code

    例2

    Bという名前のfloat型の変数を宣言する.

    Code

    例3

    ABCという名前のfloat型の変数を宣言し,初期値を代入する.

    Code

    例4

    カンマで区切り,複数の変数を宣言できる.

    Code

    例5

    初期値として数式(の計算結果)を代入.

    Code

    変数名

    変数名の制限

    変数名の1文字目は英字

    Code

    予約語は変数名として使用できない.

    Code

    代入文

    構文

    =を用いるが,数式における「=」と意味合いが異なる点に注意.

    Code

    数値型

    Code

    文字型

    Code

    文への組み込み

    変数も算術式と同様に値を持つため,文の中に組み込むことができる.

    主な組み込み方

    widthとheight

    width

    height

     

    良い変数名をつける

    複数単語の区切り

    Code
    Code

    頭文字にデータ型の頭文字を小文字で付ける

    変数の型を変数名を見ただけで判別できる工夫

    Code

    (固有)名詞

    変数名の最初の方につけるのがよい.

    Code

    単位・性質

    変数名の後ろの方につけるのが好ましい.

    Code

    計算値による修飾子

    変数名の最後につけるのがよい.

    Code

    変数によって各部のサイズ・色を変えられる家の描画. 変数名に注目.

    Code

    house01

    演習2

    変数を使って円を描画してみましょう. 大まかには,以下のような構造になります.

    Code
    1. 3つの変数の宣言文を記述しましょう.

      • 宣言文中で初期値の代入も行いましょう.

      • 変数名,型,初期値は自由ですが,以下を加味しましょう.

        • 変数Aは円の中心座標のXの値となる.

        • 変数Bは円の中心座標のYの値となる.

        • 変数Cは円の大きさの値となる.

      • 初期値は後で変更可能なので,仮の値でも構いません.

    2. 円の描画命令circle()に3つの変数を組み込みましょう.

    3. 実行し,描画結果を確認しましょう.

    4. 円がウィンドウ内に収まるように変数の値を調整しましょう.

    例2

    sin()を使ったシンプルな波形の描画. ※未修得の繰り返し文を用いています.

    Code

    sin_simple_wave_sample

    三角関数と三角比

    三角関数は三角比として使うこともできる.

    triangle_func_def

    例2

    座標変換を使わず,三角比によって時計の針状の表現を行う.

    calc_variable_sincos_line

    Code

    triangle_func

    例3

    三角関数とべき乗の計算を使った螺旋状の表現 ※未修得の繰り返し文を用いています.

    Code

    rasen01

     

     

    simple_flower

    1. 座標系をスクリーン中心へ平行移動し,花弁用の楕円を1つ描画する.

      楕円は少しX軸方向(右方向)へずらしておく.(これには平行移動は使わないこと)

      simple_flower_firstellipse

    2. 座標系を72°回転させて同じ楕円を1つ描画する.

      simple_flower_secondellipse

    3. ステップ2を繰り返し,計5個の楕円を描画する.

      simple_flower_5ellipses

    4.  

    以下完成プログラム

    Code

     

    演習4

    図形を一つ自由に描画してみましょう.

    条件

    draw_practice01

    ※下に答えの一例がありますが,最初は見ずに自分でやってみましょう.

    Code

    色見本

    色相と彩度のグラデーション

    カラーモード指定において,カラーモデルとしてHSBを用いる場合, 色相と彩度の関係は下の図を参考にしてみてもよい.

    Code

    hue_sat

    R値とG値のグラデーション

    Code

    colormodel_rg

    演習

    1. 100個の円をランダムな位置に描画 (※if else の演習ステップ1と同じ )

    Code

    practice01_01

    1. 条件分岐を追加.

      • もしXの値が100未満で,

        • Yの値が100未満なら,色を赤に設定

        • そうでなければ,黒に設定

      • Xの値が100未満ではなく,

        • Yの値が100未満なら色を青に設定

        • そうでなければ白に設定

        下の答えを見る前にまずやってみましょう.

    practice03_02

    Code

     

     

    演習

    1. 100個の円をランダムな位置に描画

    Code

    practice01_01

    1. 条件分岐を追加.

      • もしXの値が100未満であれば色を赤に設定

      • そうでなければ色を青に設定.

      下の答えを見る前にまずやってみましょう.

    practice01_02

    Code

     

    演習
    1. 100個の円をランダムな位置に描画 (※ウィンドウサイズ300*200)

    Code

    practice02_01

    1. 条件分岐を追加.

      • もしXの値が100未満であれば色を赤に設定

      • もしXの値が200未満であれば色を緑に設定

      • そうでなければ色を青に設定.

        下の答えを見る前にまずやってみましょう.

    Code

    practice02_02

     

    ####

    二次元配列を使った,竹藪のような表現

    Code

    junk01

    二次元配列を使ったパッチの繰り返し

    Code

    junk02

     

    ランダムな楕円のフェードアニメーション

    ellipse_fade

    1. 空のsetup()draw()を用意

    できれば下の答えを見る前にやってみましょう.

    Code

    2. setup()に以下の処理を追加

    できれば下の答えを見る前にやってみましょう.

    Code

    3. draw()に以下の処理を追加

    ellipse_fade_01

    できれば下の答えを見る前にやってみましょう.

    Code

    4. スクリーンのリフレッシュ処理を追加

    ellipse_fade_02

    できれば下の答えを見る前にやってみましょう.

    Code

    5. スクリーンリフレッシュのアルファ値を50%に変更

    できれば下の答えを見る前にやってみましょう.

    Code

     

    curveによる螺旋描画

    Code

    curve_rasen

    円周上に花を描画する

    Code

    junk03

    惑星クラスによる太陽系の描画

    Code

    class_planet

    ハノイの塔

    以下のルールに従ってすべての円盤を右端の杭に移動させられれば完成.

    Code

    recursive_hanoi